A React hook is a function that lets a React function component connect to state, context, lifecycle behavior, or side effects. Hooks let function components manage capabilities once associated mainly with class components, while keeping related UI logic together. section 1.2 section 1.3
Common hooks support distinct parts of component behavior:
- useState and useReducer manage state and provide updater functions that can cause React to rerun the component and update its UI. section 2.4
- useEffect performs and cleans up side effects such as fetching data, subscribing to a service, or working with the document. section 1.3.1 section 9.1
- useContext accesses application state through context, while custom hooks package related state and behavior for reuse across components. section 1.2 section 1.3.2
- Call hooks at the top level of function components or custom hooks; do not place them in conditionals, loops, nested functions, or ordinary JavaScript functions. section 9.2.1 section 9.2.2
Quiz component with local state and effects
A Quiz function component can use state for its current question and use effects to load question data and subscribe to online users. Related fetching and subscription logic can then move into reusable useFetch and useUsers custom hooks, which Quiz and Chat can both call. section 1.3.1 section 1.3.2
function MyComponent (props) {
// Use local state.
const [value, setValue] = useState(initialValue); #1
const [state, dispatch] = useReducer(reducer, initialState); #1
useEffect(() => {
// Perform side effect. #2
});
return (
<p>{value} and {state.message}</p> #3
);
}
Use the listing to compare useState, useReducer, and useEffect within one function component: state setup, side-effect work, and returned UI appear together. section 1.1.3
