Master the Important React Hooks

Important React Hooks
1. useState()
It is used to create and manage state inside a functional component.

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

2. useEffect()
It performs side effects after rendering.
Common Use Cases

• API calls
• Timers
• Event listeners
• Updating the document title

useEffect(() => {
  console.log("Component Mounted");
}, []);

3. useContext()
It Shares data across multiple components without prop drilling.
Common Use Cases

• Authentication
• Theme
• Language
• User profile

const user = useContext(UserContext);

4. useRef()
It stores mutable values and accesses DOM elements without causing a re-render.
Common Use Cases

• Auto focus input
• Stopwatch
• Previous value tracking

const inputRef = useRef();

5. useMemo()
It caches expensive calculations to improve performance.
Common Use Cases

• Filtering
• Sorting
• Large calculations

const total = useMemo(() => calculateTotal(items), [items]);

6. useCallback()
It caches functions so they aren't recreated on every render.

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

7. useReducer()
It Manages complex state using actions and a reducer function.
Common Use Cases

• Shopping cart
• Forms
• Authentication
• Complex applications

const [state, dispatch] = useReducer(reducer, initialState);

8. Custom Hooks
It reuse component logic across multiple components.
9. useLayoutEffect()
It runs synchronously before the browser paints the screen.
10. useId()
It generates unique IDs.
Useful for:

• Forms
• Accessibility

11. useTransition()
It allows non-urgent updates without blocking the UI.
Useful for:

• Search
• Filtering
• Large lists

12. useDeferredValue()
It delays expensive rendering to keep the UI responsive.
Useful for:

• Live search
• Auto complete