Hook

ELI5 — The Vibe Check

Hooks are special functions in React that let function components use superpowers like state and lifecycle that used to be class-only. They always start with 'use' like useState or useEffect. They're basically cheat codes for your components.

Real Talk

Hooks are functions introduced in React 16.8 that let function components tap into React features like state, context, lifecycle, and refs. Rules of hooks: only call them at the top level, only inside React functions. Custom hooks allow you to extract and share stateful logic.

Show Me The Code

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState(window.innerWidth);
  useEffect(() => {
    const handler = () => setSize(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return size;
}

When You'll Hear This

"Write a custom hook to share that fetching logic." / "You broke the rules of hooks — don't call useEffect inside an if statement."