Key Points to Note When Using React Hooks?

When using React Hooks, it is important to follow certain best practices and considerations to ensure code maintainability and correct functionality. Below are some key points:

1. Adhering to Hooks Rules

Avoid calling Hooks inside loops, conditionals, or nested functions

Hooks should always be called at the top level of the component to ensure consistent order of Hook calls during every render, which is essential for React's internal state management.

Call Hooks only within React function components or custom Hooks

Do not call Hooks in plain JavaScript functions.

2. Considerations for Using useState

Initializing State

For complex state logic, you can lazily initialize by passing a function to useState, which avoids re-creating the initial state on every render.

jsx
const [state, setState] = useState(() => {
    const initialState = someExpensiveComputation(props);
    return initialState;
});

Stable Identity of State Update Functions

The setState function has stable identity, meaning you can safely reference it in other Hooks without concerns about it changing during re-renders.

3. Considerations for Using useEffect

Cleaning up Side Effects

Subscriptions, timers, and event listeners created in useEffect should be cleaned up in the returned cleanup function to avoid memory leaks.

jsx
useEffect(() => {
    const subscription = props.source.subscribe();
    return () => {
        // Clean up subscription
        subscription.unsubscribe();
    };
}, [props.source]);

Completeness of Dependency List

Ensure the dependency list includes all values from the external scope used by useEffect to correctly respond to changes. Omitting dependencies may cause old closures to capture values, leading to errors.

jsx
useEffect(() => {
    function doSomething() {
        console.log(someProp);
    }

    doSomething();
}, [someProp]); // Ensure all used variables are included in the dependency list

4. Avoid Unnecessary Operations in useEffect

Throttling and Debouncing

If operations inside useEffect are expensive, consider using throttling or debouncing to reduce the frequency of operations.

5. Custom Hooks

Code Reuse

When you find yourself needing to reuse state logic across different components, extract it into a custom Hook. This helps reduce code duplication and enhances maintainability.

For example, using a custom useForm Hook for form handling:

jsx
function useForm(initialValues) {
    const [values, setValues] = useState(initialValues);

    const handleChange = (event) => {
        setValues({
            ...values,
            [event.target.name]: event.target.value,
        });
    };

    return [values, handleChange];
}

6. Performance Optimization

useMemo and useCallback

Use useMemo and useCallback when necessary to avoid unnecessary renders or computations. useMemo caches the results of complex computations, while useCallback caches functions, which is particularly useful when passing functions to child components to prevent unnecessary re-renders of child components.