React Hooks in 15 Minutes
A fast, practical tour of useState, useEffect, useMemo, and custom hooks with real examples.
What You'll Learn
- Use useState and useEffect correctly without pitfalls
- Optimize with useMemo and useCallback
- Write your own custom hooks to share logic
- Understand the rules of hooks and why they exist
- Migrate class components to functional components
Prerequisites
- Basic JavaScript (ES6+)
- Familiarity with React components and JSX
Step-by-Step Guide
Step 1
1. useState — Local Component State
useState returns a stateful value and a setter. Always treat state as immutable — never mutate it directly. For objects, spread the previous state and override only the changed field. React batches updates in event handlers, so multiple setState calls won't cause multiple re-renders.
Step 2
2. useEffect — Side Effects & Lifecycle
useEffect runs after the browser paints. The dependency array controls when it re-runs: empty array = run once on mount, no array = run on every render, [dep] = run when dep changes. Always return a cleanup function when subscribing to events, intervals, or external data sources to prevent memory leaks.
Step 3
3. useMemo & useCallback — Performance
useMemo caches an expensive computed value between renders. useCallback caches a function reference. Only use them when profiling shows a real slowdown — premature optimization adds complexity. The main use case is passing stable references to child components that are wrapped in React.memo.
Step 4
4. Custom Hooks — Reusable Logic
A custom hook is simply a function whose name starts with 'use' and that calls other hooks. Extract repeated logic — data fetching, form state, local storage sync — into custom hooks. They make components thinner and logic independently testable. Examples: useLocalStorage, useFetch, useDebounce.
Step 5
5. Rules of Hooks
Only call hooks at the top level of a function component or another hook — never inside loops, conditionals, or nested functions. React relies on the call order to associate state with the correct hook across renders. ESLint's eslint-plugin-react-hooks enforces these rules automatically.
Further Reading & Resources
Ready to put this into practice?
Apply for a real Web Development internship and ship production projects with mentorship.