React › Hooks

What are hooks in React and why were they introduced?

Beginner

Answer

Hooks are special functions, like useState and useEffect, that let a function component use features such as state and lifecycle behavior, which used to only be available in class components. They were introduced to make components simpler to write and to make it easier to reuse logic between components.

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Real-world example A team rewrites an old class based counter component into a much shorter function component using the useState hook, making the code easier to read and maintain.

Common follow-ups: What problems did hooks solve that class components struggled with?;Can hooks be used inside a class component?

Custom Hooks;Props & State