Heuristics for optimizing React’s performance:
- If you can solve the problem by altering component hierarchy or state, prioritize that!
- Memoization is a solid strategy only if the cost of checking pays for itself with the time you save rendering.
- Use Lazy/Suspense API to progressively load components.
- Use the Transition API (
useDeferredValue) when you’re really in a pickle (e.g something is computationally expensive, but not running it is not a choice).
console.dir() to print nested object.
keys() methods of ES6, we can create array from
n like this:
To create an array starting from
When to use
Object for records where you have a fixed and finite number of properties/fields known at author time, such as a config object or anything that is for one-time use in general.
Map for dictionaries or hash maps where you have a variable number of entries, with frequent updates, whose keys might not be known at author time, such as an event emitter.
According to benchmarks, unless the keys are strings of small integers,
Map is indeed more performant than
Object on insertion, deletion and iteration speed, and it consumes less memory than an
Object of the same size.
__dirname will resolve to the directory the executing script resides in. So if your script resides in
__dirname will resolve to
The accessibility inspector in Firefox exposes Gecko’s accessibility tree rather than information from the platform accessibility layer.
An example of the result of this is
role="button" showing up as
To check how the internal roles are mapped to platform roles, look at the source of truth.
You can inspect the X (clear all) that shows up when you type in
<input type="search" /> by enabling “Show user agent shadow DOM” in DevTools under “preferences”.
Code snippets: Svelte action that redirect focus to element when a character key is pressed.
You can remove an element’s default styling with a single line of CSS.
You can use the
:scope pseudo class to select direct children of an element with
With the HTML above, you can do: