React: What is useInsertionEffect?

useInsertionEffect is a hook that executes before all other effects, specifically for CSS-in-JS libraries (styled-components, Emotion).

Simple analogy: Imagine you are painting walls (adding styles).

• Regular effect (useEffect) — you have already placed furniture (rendered components), and then paint the walls. Furniture can get dirty.
• useInsertionEffect — you paint the walls BEFORE bringing in furniture. Styles are applied before the first render.

Who needs this: Regular developers do not need useInsertionEffect. It is used by libraries like styled-components to:

1. Insert styles into DOM before the component renders.
2. Avoid "flickering" (when you first see without styles, then with styles).

Example (for library creators):

1useInsertionEffect(() => {
2    const style = document.createElement('style');
3    style.textContent = '.my-class { color: red; }';
4    document.head.appendChild(style);
5}, []);

useDebugValue — another hook for library developers. It adds a label for custom hooks in React DevTools:

1function useAuth() {
2    useDebugValue(isAuth ? "Logged in" : "Not logged in");
3    // In DevTools it will show: useAuth: "Logged in"
4}