React Hook Rules You Must Know

With the introduction of Hooks in React 16.8, developers have adopted a new way of managing state and side effects in functional components. While Hooks offer great flexibility and functionality, they also come with specific rules that need to be followed to ensure optimal performance and avoid common pitfalls. In this blog, we will explore the essential rules for using Hooks in your React applications, backed by clear examples to help you understand their implementation and significance.

1. Only Call Hooks at the Top Level

One of the fundamental rules of Hooks is that you should only call them at the top level of your React function components or custom Hooks. This means you should not call Hooks inside loops, conditions, or nested functions. Following this rule ensures that Hooks are called in the same order on every render, which is crucial for React to correctly preserve the state of the Hooks.

Here’s an example of what not to do:

function MyComponent() {
  if (someCondition) {
    useState(0); // ❌ Don't do this!
  }
  return 
Hello World
;
}

Instead, you should structure your code like this:

function MyComponent() {
  const [count, setCount] = useState(0); // ✅ Call at the Top Level

  if (someCondition) {
    // Conditional logic can still be applied next
  }

  return 
{count}
;
}

2. Only Call Hooks from React Functions

Hooks can only be called from React function components and not from regular JavaScript functions. This ensures that the Hooks mechanics and lifecycle are managed correctly by React.

Here’s an example of an incorrect usage:

function regularFunction() {
    useState(0); // ❌ Invalid usage
}

To correctly use Hooks, ensure they are called within a React component or custom Hook:

function MyComponent() {
    const [count, setCount] = useState(0); // ✅ Correct usage
    return 
{count}
;
}

3. Use Hooks in Functional Components

Hooks are designed to work with functional components. If you’re still using class components, it’s recommended to convert them to functional ones to take full advantage of Hooks features.

Here’s how you can implement a simple counter in a functional component using Hooks:

import React, { useState } from 'react';

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

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

4. Custom Hooks

Custom Hooks allow you to extract component logic into reusable functions. They follow the same rules as built-in Hooks and can significantly reduce code duplication. You can create a custom Hook by prefixing its name with “use”.

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
        fetch(url)
            .then(response => response.json())
            .then(data => {
                setData(data);
                setLoading(false);
            });
    }, [url]);
    
    return { data, loading };
}

// Using the custom Hook in a component
function App() {
    const { data, loading } = useFetch('https://api.example.com/data');

    if (loading) return 
Loading...
;
    return 
{JSON.stringify(data, null, 2)}
;

}
5. Dependency Array in useEffect
The useEffect Hook has a dependency array that controls when the effect runs. You can specify variables or state values in this array, and the effect will only rerun when any of those dependencies change. Understanding this concept is crucial for preventing unnecessary re-renders.
useEffect(() => {
    // Code to run effect
}, [dep1, dep2]); // Only re-run when dep1 or dep2 changes
If you want the effect to run only once (like componentDidMount), pass an empty array:
useEffect(() => {
    console.log('Component mounted');
}, []); // Runs once on mount
6. Multiple State Hooks
Using multiple useState hooks within a single component is perfectly acceptable. This allows you to manage various states independently, which can lead to cleaner and more readable code.
function Example() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('React');

    return (
        

            
{name} has been clicked {count} times
             setCount(count + 1)}>Click Me!
             setName('React Hooks')}>Change Name
        
    );
}
7. State Initialization
When using useState, it’s wise to initialize state correctly. If the initial state is computed from props or another function, you can use a function to generate initial values.
const [value, setValue] = useState(() => computeExpensiveValue(props));
This initialization method can help improve performance, especially if the computed value is resource-intensive.
8. Avoid Callbacks in the Dependency Array
When using callbacks in the dependency array, be cautious as it may cause the effect to re-run more often than expected. It’s commonly advised to use stable references or memoization techniques to avoid this issue.
const callback = useCallback(() => {
    // do something
}, [deps]);
The usage of useCallback ensures that the dependency does not create unnecessary renders.
9. Using useReducer for Complex State Logic
For managing complex state transitions or when state logic involves multiple sub-values, consider using the useReducer Hook as an alternative to useState. It is especially useful for managing state in a predictable manner.
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' })}>-
        

10. Handling Context with useContext
If your application manages global state or context, the useContext Hook allows you to consume context values seamlessly without wrapping components with Context.Consumer. This can lead to simpler and cleaner code for large applications.
const MyContext = React.createContext();

function MyComponent() {
    const value = useContext(MyContext);
    return 
{value}
;
}
Conclusion
Understanding and adhering to the fundamental rules of React Hooks will help you build cleaner, more maintainable, and well-performing applications. Hooks are a powerful feature in React, and knowing how to use them effectively is essential for any modern React developer. By following these rules, experimenting with custom Hooks, and choosing between useState, useReducer, and useContext wisely, you will be on your way to mastering Hooks in React.
Happy coding!