How to prevent component re-render on switching browser tabs?

In Next.js, preventing component re-renders when switching browser tabs can be achieved through several strategies:

1. Use React State Management to Store State Appropriately

Component re-renders typically occur due to changes in the component's state. By managing state outside the component—such as using React Context or Redux—we can reduce unnecessary component re-renders.

Example:

Store user login state using React Context so that the state remains consistent when switching tabs, eliminating the need for component re-renders to verify login status.

jsx
import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
    const [user, setUser] = useState(null);

    const login = (userData) => {
        setUser(userData);
    };

    const logout = () => {
        setUser(null);
    };

    return (
        <AuthContext.Provider value={{ user, login, logout }}>
            {children}
        </AuthContext.Provider>
    );
}

export function useAuth() {
    return useContext(AuthContext);
}

2. Use React.memo or React.PureComponent

React.memo is a higher-order component that re-renders the component only when props change. Similarly, React.PureComponent performs shallow comparison for class components to avoid unnecessary re-renders.

Example:

jsx
const MyComponent = React.memo(function MyComponent(props) {
    // Component logic
    return <div>{props.children}</div>;
});

3. Avoid Unnecessary Re-renders

Ensure there are no redundant re-render operations in the component's rendering logic. For example, avoid defining new variables or functions inside render methods or component functions.

Example:

jsx
// Incorrect approach: A new handleClick function is created on every component render
function MyButton() {
    const handleClick = () => {
        console.log('Clicked!');
    };

    return <button onClick={handleClick}>Click me</button>;
}

// Correct approach: Use useCallback to avoid unnecessary function re-creation
function MyButton() {
    const handleClick = useCallback(() => {
        console.log('Clicked!');
    }, []);

    return <button onClick={handleClick}>Click me</button>;
}

By implementing these methods, we can effectively reduce unnecessary component re-renders in Next.js applications caused by switching browser tabs, thereby improving application performance and user experience.