Hooks
Objective
- State (opens in a new tab): add a state variable to your component.
- Effect (opens in a new tab): synchronize a component with an external system.
- Reference (opens in a new tab): reference a value that is not needed for rendering.
- Deferred value (opens in a new tab): defer updating a part of the user interface.
- Callback (opens in a new tab): cache a function definition between re-renders
- Memo (opens in a new tab): cache the result of a calculation between re-renders
- Transition (opens in a new tab): update the state without blocking the user interface.
- Optimistic (opens in a new tab): optimistically update the state of a component.
- Context (opens in a new tab): read and subscribe to context from your component.
- Reducer (opens in a new tab): add a reducer to your component.
- Imperative handle (opens in a new tab): customize the instance value that is exposed to parent components when using a reference.
- Layout effect (opens in a new tab): synchronize a component with an external system after all document mutations.
- Insertion effect (opens in a new tab): insert elements into the document before any layout effects fire.
- Form status (opens in a new tab): gives you status information of the last form submission.
- Action state (opens in a new tab): update state based on the result of a form action.
- Id (opens in a new tab): generate unique identifiers for accessibility attributes.
- External store (opens in a new tab): subscribe to an external store.
- Debug value (opens in a new tab): display a label for custom hooks in the developer tools.
- Use (opens in a new tab): read the value of a resource like a promise or context.
- Query (opens in a new tab): a powerful asynchronous state manager.
- Hooks (opens in a new tab): a collection of modern, server-safe hooks.
- Zustand (opens in a new tab): a small, fast, and scalable state management solution.