Getting Started with React Hooks

The Evolution of React Components

For years, if you needed state or lifecycle methods in a React component, you had to use a class. With the introduction of Hooks, that's no longer the case. Hooks are functions that let you "hook into" React state and lifecycle features from functional components, leading to cleaner, more readable, and more maintainable code.

The Two Essential Hooks: useState and useEffect

While there are several built-in Hooks, understanding these two is the key to getting started:

1. The State Hook: useState

useState is the Hook that lets you add React state to function components. You call it with an initial value, and it returns an array containing the current state value and a function to update it.

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

Here, count is our state variable, and setCount is the function we use to change its value. It's that simple!

2. The Effect Hook: useEffect

useEffect lets you perform side effects in your components. What are side effects? Operations like fetching data, setting up a subscription, or manually changing the DOM. It runs after every render, including the first one.

useEffect(() => {
  document.title = `You clicked ${count} times`;
});

By using an empty dependency array [] as a second argument, you can ensure the effect runs only once after the initial render, perfect for data fetching.

Why Hooks are a Big Deal

Hooks allow you to reuse stateful logic without changing your component hierarchy. They make it possible to split one component into smaller functions based on what pieces are related (like setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods. This makes your codebases easier to understand and test.