React’s 6 Main Hooks Explained

React Hooks are functions that let you use state and other React features in functional components. They were introduced in React 16.8 to simplify state management and side effects in React applications. In this blog post, we will explore the six main hooks in React: useState, useMemo, useCallback, useContext, useEffect, and useReducer.

useState

The useState hook lets you add state to your functional components. It returns an array with two elements: the current state value and a function to update it.

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

In this example, useState(0) initializes the state variable count with a value of 0. The setCount function is used to update the state value. For example:

setCount(1);

This changes the count value to 1.

useMemo

The useMemo hook returns a memoized value that only gets recalculated when the specified dependencies change. This is useful for optimizing performance.

const area = useMemo(() => {
    return calcSurfaceArea(size);
}, [size]);

Here, useMemo calculates the area only when size changes, thus avoiding unnecessary calculations.

useCallback

The useCallback hook returns a memoized version of a callback function that only changes when its dependencies change. This helps in avoiding unnecessary re-renders.

const handleRenderArea = useCallback(() => {
    updateSurfaceArea(size);
}, [size]);

In this case, handleRenderArea will only update when size changes.

useContext

The useContext hook accepts a context object created using React.createContext and returns the current value of that context.

const value = useContext(ThemeContext);

Here, useContext returns the current value of ThemeContext.

useEffect

The useEffect hook allows you to perform side effects in your components, such as fetching data or adding event listeners. It runs after the initial render and after every update.

useEffect(() => {
    addListeners();
    return () => {
        removeListeners();
    };
});

In this example, event listeners are added after the initial render and cleaned up just before the component unmounts. You can also specify dependencies to control when the effect runs:

useEffect(() => {
    fetchUserInfo(userID);
}, [userID]);

This effect runs after the first render and every time userID updates.

useReducer

The useReducer hook is similar to useState but allows you to manage more complex state logic. It returns the current state and a dispatch function.

const [state, dispatch] = useReducer(updateCount, {count: 0});

The updateCount function defines how the state is updated based on the action object:

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

To update the state, you call the dispatch function with an action object:

dispatch({type: 'decrement'});

This example decrements the count value by 1.

Conclusion

React hooks provide a powerful and flexible way to manage state and side effects in functional components. By understanding and utilizing useState, useMemo, useCallback, useContext, useEffect, and useReducer, you can write cleaner and more efficient React code.

Follow Us:

Stay updated with our latest tips and tutorials by subscribing to our YouTube Channel.