and [[React]]'s *functional components*; I see why people don’t like hooks as they are too *magical*. Hooks alow allow you to write stateful code without explicitly managing states and it depends on the invocation order being deterministic. The exact same number and order of hooks need to be invoked, ideally in the beginning of the function. React maintains it via set of [[Linters]] ([eslint-plugin-react-hooks](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks), [Rule of Hooks](https://legacy.reactjs.org/docs/hooks-rules.html)). > [!warn] Hooks caveats > > * Function components have deterministic initialization sequence. Exact same sequence of hooks invoked every time. This means. > * No `if`s to initialize hooks. > * No nondeterminism (hooks initializing from an `Object`'s keys'?) > * Exploiting JavaScript's execution model. > * single-threaded, no context switches (without `async`s) - and functional components cannot be async. > * All react components are created via `React.createComponent` which can wire up the hooks. > > [!thought] > [[FE Framework History|knockout.js]] had similar limitations with its `ko.computed` function. I only seriously used React after the hooks introduction, thus I'm too used to them. Class components look too Java-y; verbose and forces maintenance of state via careful programming. Even though you can program in more orthodox OOP way, it's debatable whether the class components have less "gotchas" than the functional components with hooks. Hooks take an advantage of [[JavaScript]]'s execution model. Many of these could be implemented in a traditional language too (using [[Dynamic Scoping|threadlocal]]) but JavaScript makes it easier. # List of hooks [built-in hooks](https://react.dev/reference/react/hooks) `useState` is perhaps the most intuitive hook; if you squint really hard, it's like declaring a variable. - state hooks - `useState` - `useReducer` - context hooks - `useContext` - become slightly tricky to use in the server-component world. - however, because client and server components can be interweaved, this is still valuable. - ref hooks - useRef - can hold external state, but almost always used to hold DOM elements. - https://react.dev/learn/referencing-values-with-refs#differences-between-refs-and-state - forwardRef - not needed after react 19, but needed to pass refs around - https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop - useImperativeHandle - effects - useEffect - useLayoutEffect - useInsertionEffect - performance - useMemo - useCallback - useTransition - useDeferredValue # Third Party Hooks - [[react-hook-form]] ## React 18 hooks - useActionState - useFormStatus - this is part of `react-dom`.