Heuristics for optimizing React’s performance:

1. If you can solve the problem by altering component hierarchy or state, prioritize that!
2. Memoization is a solid strategy only if the cost of checking pays for itself with the time you save rendering.
3. Use Lazy/Suspense API to progressively load components.
4. Use the Transition API (useTransition / useDeferredValue) when you’re really in a pickle (e.g something is computationally expensive, but not running it is not a choice).

Use console.dir() to print nested object.

const obj = {
  a: "a",
  b: {
    c: "c",
    d: {
      e: "e",
      f: {
        g: "g",
        h: {
          i: "i",
        },
      },
    },
  },
};

console.log(obj);
// { a: 'a', b: { c: 'c', d: { e: 'e', f: [Object] } } }

console.dir(obj, { depth: null }); // `depth: null` ensures unlimited recursion
// {
//   a: 'a',
//   b: {
//     c: 'c',
//     d: { e: 'e', f: { g: 'g', h: { i: 'i' } } }
//   }
// }

Using Array from() and keys() methods of ES6, we can create array from 0 to n like this:

Array.from(Array(10).keys());
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

or

[...Array(10).keys()];
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

To create an array starting from 1:

Array.from({ length: 10 }, (_, i) => i + 1);
//=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

When to use Object VS Map in Javascript:

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.

Use 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.

Node tips: __dirname will resolve to the directory the executing script resides in. So if your script resides in /home/sites/app.js, __dirname will resolve to /home/sites.

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 role="pushbutton" instead.

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.

function keyRedirect(node: HTMLElement) {
  function handleKeydown(e: KeyboardEvent) {
    if (node === document.activeElement) {
      return;
    }
    if (e.code.match(/\w/g)) {
      node.focus();
    }
  }
  window.addEventListener("keydown", handleKeydown);
  return {
    destroy() {
      window.removeEventListener("keydown", handleKeydown);
    },
  };
}

You can remove an element’s default styling with a single line of CSS.

button {
  all: unset;
}

You can use the :scope pseudo class to select direct children of an element with .querySelectorAll().

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p>D</p>

With the HTML above, you can do:

console.log(document.body.querySelectorAll("*"));
// NodeList(5) [ul, li, li, li, p]

console.log(document.body.querySelectorAll(":scope > *"));
// NodeList(2) [ul, p]