From Classes to Functions: A New Way of Thinking

For years, if you wanted a React component to have state or lifecycle methods, you had to write it as a JavaScript class. This worked, but it came with complexity: the this keyword was often confusing, code could be hard to reuse, and components grew into massive, hard-to-read files.

React Hooks changed everything. They are special functions that let you "hook into" React's features, like state and lifecycle, directly from simple, clean functional components. This made React code more readable, composable, and fun to write. But with this new power came new mental models to learn, particularly around how components re-render and when "side effects" occur.

The Render Cycle: React's Heartbeat

The first and most crucial concept to understand is that a React component is just a function. When React needs to display your component, it simply calls that function. The JSX it returns is what gets rendered to the screen. A "re-render" is nothing more than React calling your component's function again, usually because its state or props have changed.

This is a simple but profound idea. Every time your component re-renders, all the code inside it runs from top to bottom. This is why we need special tools to preserve information between these function calls.

`useState`: Giving Components Memory

If a component function runs from scratch on every render, how can it remember anything? This is the problem that `useState` solves. Think of it as a "magic box" that lives outside your component's function. When you call `useState`, React gives you the current value from the box and a special function to update it. When you call the update function, React does two things:

1. It updates the value in the "magic box."
2. It triggers a re-render of your component, so it can run again with the new value.

`useEffect`: Handling Side Effects

What if you need to do something that isn't directly related to rendering, like fetching data from an API, setting up an event listener, or changing the document title? These are called side effects. Putting them directly in your component function is a bad idea because they would run on every single render.

The `useEffect` hook is a special place for your side effects. It tells React: "Run this function after you have rendered the component, and only under certain conditions." Those conditions are controlled by the most important, and most confusing, part of the hook: the dependency array.

The Interactive Hooks Playground

This is where it all comes together. The visualizer below represents a simple React component. Use the buttons to trigger state changes and watch the logs to see exactly when the component re-renders and when its effects are triggered. This is the key to building an intuition for the Hooks lifecycle.

The Dependency Array: The Root of All Confusion

The second argument to `useEffect` is an array of "dependencies." This array tells React when to re-run your effect. This is the most critical part to master.

Case 1: No Dependency Array

If you don't provide the array, the effect will run after every single render. This is rarely what you want and is a common source of bugs.

useEffect(() => { // Runs on every render });

Case 2: Empty Dependency Array `[]`

This tells React that your effect has no dependencies on any state or props. The effect will run only once, right after the initial render. This is perfect for setting up subscriptions or fetching initial data that doesn't change.

useEffect(() => { // Runs only on mount }, []);

Case 3: Array with Values `[count, user.id]`

This is the most common case. You provide an array of all the state variables and props that your effect reads. React will run the effect after the first render, and then it will only re-run the effect if any of the values in that array have changed since the last render.

useEffect(() => { // Runs when count or user.id changes }, [count, user.id]);

Conceptual Challenges

Challenge 1: The Infinite Loop

Why does the following code create an infinite loop of data fetching?

const [data, setData] = useState(null);

useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(result => setData(result)); // This causes a re-render!
}); // No dependency array!