| // Usually I use this in my app's config file, in case I need to disable all cache from the app | |
| // Cache is from `js-cache`, something like `import Cache from 'js-cache';` | |
| const cacheable = true, | |
| cache = new Cache(); | |
| // On request, return the cached version, if any | |
| axios.interceptors.request.use(request => { | |
| // Only cache GET requests | |
| if (request.method === 'get' && cacheable) { |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| * { | |
| font-size: 12pt; | |
| font-family: monospace; | |
| font-weight: normal; | |
| font-style: normal; | |
| text-decoration: none; | |
| color: black; | |
| cursor: default; | |
| } |
While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.
Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.
| . | |
| ├── actions | |
| ├── stores | |
| ├── views | |
| │ ├── Anonymous | |
| │ │ ├── __tests__ | |
| │ │ ├── views | |
| │ │ │ ├── Home | |
| │ │ │ │ ├── __tests__ | |
| │ │ │ │ └── Handler.js |
In React's terminology, there are five core types that are important to distinguish:
React Elements
| /** | |
| * IE 5.5+, Firefox, Opera, Chrome, Safari XHR object | |
| * | |
| * @param string url | |
| * @param object callback | |
| * @param mixed data | |
| * @param null x | |
| */ | |
| function ajax(url, callback, data, x) { | |
| try { |
