Understanding React Hooks

React Hooks were introduced in React 16.8 as a way to use state and other React features without writing a class.

Why Hooks?

• Reuse Stateful Logic: Share logic between components
• Split Complex Components: Break down complex components into smaller functions
• Use React Features Without Classes: Access React features in functional components

Common Hooks

useState

The useState hook lets you add state to functional components:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

The useEffect hook lets you perform side effects in functional components:

import { useState, useEffect } from 'react';

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

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Custom Hooks

You can create your own Hooks to reuse stateful logic between components.

Conclusion

React Hooks provide a more direct API to React concepts you already know: props, state, context, refs, and lifecycle.