Complete Guide to React Hooks in 2024

Introduction to React Hooks

React Hooks have revolutionized how we write React components. Introduced in React 16.8, hooks allow you to use state and other React features without writing a class component.

Why Use Hooks?

Hooks provide several benefits over class components:

• Simpler component logic
• Better code reuse
• Easier testing
• No more 'this' binding issues

Basic Hooks

useState Hook

The useState hook is the most basic hook that allows you to add state to functional components.

import React, { useState } from 'react';

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

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

useEffect Hook

The useEffect hook lets you perform side effects in functional components. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in class components.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Fetch data when component mounts
    fetchData().then(setData);
    
    // Cleanup function
    return () => {
      // Cleanup code here
    };
  }, []); // Empty dependency array means run only once

  return 
{data ? data.title : 'Loading...'}
;
}

Custom Hooks

Custom hooks allow you to extract component logic into reusable functions. They must start with "use" and can call other hooks.

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

Best Practices

1. Always Call Hooks at the Top Level

Don't call hooks inside loops, conditions, or nested functions. Always call them at the top level of your React function.

2. Only Call Hooks from React Functions

Call hooks from React function components or custom hooks. Don't call them from regular JavaScript functions.

3. Use the ESLint Plugin

Install and use the ESLint plugin for React hooks to catch common mistakes:

npm install eslint-plugin-react-hooks --save-dev

Advanced Hooks

useContext Hook

The useContext hook allows you to consume context in functional components.

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedButton() {
  const theme = useContext(ThemeContext);
  
  return (
    
      I am styled by theme context!
    
  );
}

useReducer Hook

useReducer is an alternative to useState for managing complex state logic.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    

      Count: {state.count}
       dispatch({ type: 'increment' })}>+
       dispatch({ type: 'decrement' })}>-
    
  );
}

Conclusion

React Hooks have made functional components more powerful and easier to work with. By following best practices and understanding when to use each hook, you can write cleaner, more maintainable React code.

Remember to always check the official React documentation for the most up-to-date information about hooks and their usage.