core hooks: signatures & parameters

19 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useActionState signature and behavior

useActionState accepts a function (the 'Action') and returns a tuple of [data, submitAction, isPending]. The action function receives (previousState, formData) as parameters and should return the next state. useActionState will return the last result of the Action as data, and the pending state of the Action as isPending. When the wrapped Action is called, useActionState manages the pending state automatically.

use hook signature and basic usage

The use function is a React API that lets you read a resource during rendering. Its signature is: const value = use(resource). It can read a Promise or context during rendering.

use with context parameters and returns

use(context) takes a context created with createContext as parameter. It returns the context value determined by the closest context provider above the calling component. If there is no provider, it returns the defaultValue passed to createContext.

use with context searches upward only

use(context) always looks for the closest context provider above the component that calls it. It searches upwards and does not consider context providers in the component from which you're calling use(context).

use with Promise parameters and returns

use(promise) takes a Promise whose resolved value you want to read. The Promise must be cached so that the same instance is reused across re-renders. It returns the resolved value of the Promise.

use(browser()) signature and behavior

use can be called with the value returned by browser() to render a component only in the browser. During server rendering, the component suspends and React includes the closest Suspense boundary's fallback. In the browser, use(browser()) returns undefined, so the component renders normally.

use(context) example with conditional rendering

use can be called inside conditional statements. Example: function HorizontalRule({ show }) { if (show) { const theme = use(ThemeContext); return <hr className={theme} />; } return false; }

use with Promise example reading resolved value

Example of reading a Promise with use: function Albums({ albumsPromise }) { const albums = use(albumsPromise); return ( <ul> {albums.map(album => ( <li key={album.id}> {album.title} ({album.year}) </li> ))} </ul> ); }

use browser() example for browser-only rendering

Example of using use(browser()) to render a component only in the browser: import { use } from 'react'; import { browser } from 'react-dom'; function BrowserOnly() { use(browser('This component requires browser APIs.')); return <BrowserContent />; }

useLayoutEffect fires before browser repaints

useLayoutEffect is a version of useEffect that fires before the browser repaints the screen. React guarantees that code inside useLayoutEffect and any state updates scheduled inside it will be processed before the browser repaints the screen.

useLayoutEffect setup function timing and cleanup

The setup function runs after the component commits to the DOM and before the browser repaints. React will run the cleanup function (if provided) with old values before running setup with new values after every commit with changed dependencies. Before the component is removed from the DOM, React will run the cleanup function.

useLayoutEffect dependencies parameter

The dependencies parameter is optional and is a list of all reactive values referenced inside the setup code, including props, state, and variables/functions declared directly inside the component body. React compares each dependency with its previous value using Object.is comparison. If omitted, the Effect re-runs after every commit of the component. The list must have a constant number of items and be written inline like [dep1, dep2, dep3].

useLayoutEffect blocks browser repainting and can hurt performance

The code inside useLayoutEffect and all state updates scheduled from it block the browser from repainting the screen. When used excessively, this makes the app slow. useEffect should be preferred when possible because it does not block the browser.

useLayoutEffect only runs on the client

Effects from useLayoutEffect only run on the client. They do not run during server rendering.

useLayoutEffect state updates trigger all remaining Effects immediately

If a state update is triggered inside useLayoutEffect, React will execute all remaining Effects immediately, including useEffect.

useLayoutEffect for measuring layout before browser repaint

useLayoutEffect is used to measure layout information (like element height or position) before the browser repaints the screen. This allows rendering in two passes: first with a temporary position, measuring the layout, then re-rendering with the correct position, all before the user sees any visual change.

useLayoutEffect example for tooltip positioning

Example showing tooltip positioning with useLayoutEffect: ```js import { useState, useRef, useLayoutEffect } from 'react'; function Tooltip() { const ref = useRef(null); const [tooltipHeight, setTooltipHeight] = useState(0); useLayoutEffect(() => { const { height } = ref.current.getBoundingClientRect(); setTooltipHeight(height); }, []); // ...use tooltipHeight in rendering logic } ``` This measures the tooltip's height after initial render but before the browser repaints, allowing proper positioning based on available space.

useLayoutEffect blocks paint vs useEffect does not

useLayoutEffect blocks the browser from repainting after state updates, ensuring two-pass rendering happens invisibly. useEffect does not block the browser, which can cause flickering when layout measurements are needed, but is better for performance when layout measurements are not required.

useLayoutEffect signature and parameters

useLayoutEffect takes two parameters: setup (required) and dependencies (optional). The signature is useLayoutEffect(setup, dependencies?). It returns undefined.

Give your agent this brain