React Hooks
- In Turkish
- React Hook'ları
In short
React hooks are functions such as useState and useEffect that let a function component keep state, run side effects and share logic with others.
What are React hooks?
A hook is a function whose name starts with use and that a React component calls to use one of React's features. useState gives a component a value that survives re-renders, and a function to change it; changing it renders the component again. useEffect runs code after rendering, for side effects such as fetching data, setting a timer or subscribing to an event, and can return a cleanup function.
Hooks arrived in React 16.8, in 2019. Before them, only class components could hold state, and logic such as subscribing to a data source was split across lifecycle methods. Hooks brought those features to plain functions, and today almost all new React code is written with function components and hooks. Others cover common needs: useRef keeps a value or a DOM element without re-rendering, useMemo and useCallback avoid repeating work, and useContext reads data shared from above.
Hooks come with two rules. Call them only at the top level of a component, never inside conditions or loops, because React matches each hook to its state by the order of the calls. And call them only from components or from other hooks. Within those rules you can write your own hooks, such as useOnlineStatus(), which bundle stateful logic so several components can share it.
Key takeaways
- Hooks are functions starting with
usethat give function components React's features. useStateholds state;useEffectruns side effects after rendering.- Call hooks only at the top level, in the same order on every render.
- Custom hooks package stateful logic so components can share it.
Example
import { useEffect, useState } from "react";
function Counter() {
const [count, setCount] = useState(0); // a value React keeps between renders
useEffect(() => {
document.title = `Clicked ${count} times`; // after renders that change count
}, [count]);
return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}Readers ask
Why can't I call a hook inside an if statement?
React keeps each component's hook state in a list and matches it to the hooks by their order on every render. If a hook is skipped on one render, every hook after it gets the wrong state. Put the condition inside the hook instead, or return early only after all the hooks have been called.
When should I write a custom hook?
When two or more components need the same stateful logic, such as tracking the window size or fetching data with loading and error states. A custom hook is a function whose name starts with use and that calls other hooks, and each component that uses it gets its own copy of the state.
See also
- ReactWeb Development, p. 36React is an open-source JavaScript library for building user interfaces from reusable components that update automatically when their data changes.
- State ManagementWeb Development, p. 44State management is how an application stores, updates and shares the data that changes while it runs, and keeps the interface in sync with it.
- JSXWeb Development, p. 26JSX is a JavaScript syntax extension for writing HTML-like markup inside code, used mainly with React to describe what the user interface should look like.
- Virtual DOMWeb Development, p. 53The virtual DOM is a lightweight copy of a page's element tree kept in JavaScript memory, which UI libraries compare to update the real DOM efficiently.
- ClosureProgramming Fundamentals, p. 10A closure is a function that remembers the variables from the scope where it was created, so it can keep using them even after the outer function has returned.
- UI ComponentWeb Development, p. 51A UI component is a self-contained, reusable piece of an interface, such as a button, a form or a card, that bundles its markup, style and behavior.
Sources
Spotted a mistake or something missing on this page?Suggest an edit