Latest tips / 2

The React Developer Tools extension for your browser allows you to inspect your React application and see the component tree. By default, the components tree only renders your React components but not the DOM nodes. However, you can change the default filter and show DOM nodes as well.

Follow these steps to show DOM nodes in the components tree:

1. Navigate the React Components tab in the DevTools
2. Click on the settings icon in the top right corner of the tree panel
3. Navigate to the Components tab in the settings overlay
4. Disable the toggle in the Hide components where... section.

Here's a quiz for you: Given the HTML below, what element will be returned by the querySelector() call? Note that the .wrapper is outside the .main element.

<div class="wrapper">
  <div class="main">
    <div class="content"></div>
  </div>
</div>

const main = document.querySelector(".main");
const content = main.querySelector(".wrapper .content");
// What's the result???

Don't cheat! Think about it for a second.

If you call querySelector() or querySelectorAll() on an element, you will only get elements within that element. However, the query itself will be applied to the whole document. So the above code will return the <div class="content"></div> node.

You can include the :scope pseudo-class to apply the query to the element itself:

const main = document.querySelector(".main");
const content = main.querySelector(":scope .wrapper .content");
// Result: null

This is also useful to query direct children of an element:

const main = document.querySelector(".main");
const content = main.querySelector(":scope > .child");
// --> Does not include nested .child elements

In contrast to the old @import rule to import SCSS files in Sass, the newer @use rule can only be used at the top level of a file, before any other statements. Using it inside a CSS selector is not allowed. For example:

.dark-theme {
  // Works
  @import "./dark-theme.scss";

  // Does NOT work
  @use "./dark-theme.scss";
}

But there is still a way for scoped imports. The meta.load-css function allows you to import a SCSS file inside a CSS selector and scope it to that selector:

@use "sass:meta";

.dark-theme {
  @include meta.load-css("./dark-theme.scss");
}

Unlike @import, meta.load-css does not affect the parent selector & in the imported file. Given the following file:

// dark-theme.scss
button {
  & + & {
    margin-inline-start: 1rem;
  }
}

Importing it with @import would result in a CSS selector that is technically valid but likely not what you want:

// Using @import results in:
.dark-theme button + .dark-theme button {
  margin-inline-start: 1rem;
}

Using meta.load-css however does not break the parent selector:

// Using meta.load-css results in:
.dark-theme button + button {
  margin-inline-start: 1rem;
}

If you ever have to work with timezones in JavaScript, you can use Intl.DateTimeFormat to get the IANA timezone of the user:

const timeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
// Result: "Europe/Zurich"

When you create a custom hook in React that returns a tuple, like setState does, you must tell TypeScript that you are returning a tuple and not just an array of arbitrary length. For example, the following code will not work:

function usePromise<T>(fn: () => Promise<T>) {
  // ...
  return [value, isReady];
}

TypeScript will tell you that the return type of the hook is (T | boolean)[]. To make the return value type-safe, you can use as const:

function usePromise<T>(fn: () => Promise<T>) {
  // ...
  return [value, isReady] as const;
}

The return type is now readonly [T, boolean]. However, as a consumer of the hook you don't know what these values mean. What's that boolean value? Does it indicate if the promise is ready or if it failed? You can solve this by explicitly defining the return value and giving the tuple items a name:

function usePromise<T>(fn: () => Promise<T>): [value: T, isReady: boolean] {
  // ...
  return [value, isReady];
}

This way, the return type is [value: T, isReady: boolean] and the consumer of the hook knows what the values mean.