Understanding React Hooks

React Hooks revolutionized the way we build React components by allowing us to use state and other React features without writing a class.

Why Hooks?

Before Hooks, components that needed to manage state had to be class components. This led to several issues:

• Complex components became hard to understand
• Duplicated logic in lifecycle methods
• Class syntax is harder to optimize for machines and humans

Hooks solve these problems by letting you use more of React's features without classes.

The Basic 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 function components:

import { useState, useEffect } from 'react';

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    
    // Cleanup function
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Empty dependency array means this runs once on mount
  
  return <p>Window width: {width}px</p>;
}

useContext

The useContext hook accepts a context object and returns the current context value:

import { useContext } from 'react';
import { ThemeContext } from './theme-context';

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

Custom Hooks

One of the best features of Hooks is that you can create your own to extract and reuse stateful logic:

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = value => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

Rules of Hooks

To ensure Hooks work correctly, you must follow these rules:

• Only call Hooks at the top level of your function component
• Only call Hooks from React function components or custom Hooks

React relies on the order in which Hooks are called to correctly preserve state between renders.

Conclusion

React Hooks provide a more direct API to React concepts you already know: props, state, context, refs, and lifecycle. They enable composition and better code reuse without introducing unnecessary nesting to your component tree.

As you build your applications with Hooks, you'll find they lead to more concise and often more readable code that's easier to maintain in the long run.