FreeCodingSchool

useState Hook

The useState Hook lets you add state to function components.

const [count, setCount] = useState(0);

return (
<button onClick={() => setCount(count + 1)}>
  Count: {count}
</button>
);

useEffect Hook

The useEffect Hook lets you perform side effects in function components.

useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);

useContext Hook

The useContext Hook lets you subscribe to React context without nesting.

const theme = useContext(ThemeContext);

Custom Hooks

Custom Hooks let you extract component logic into reusable functions.

function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);

const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);

return { count, increment, decrement };
}