React Interview Questions and Answers

React includes a stable implementation of React Hooks in 16.8 release for below packages

1. React DOM
2. React DOM Server
3. React Test Renderer
4. React Shallow Renderer

Hooks got the ideas from several different sources. Below are some of them,

1. Previous experiments with functional APIs in the react-future repository
2. Community experiments with render prop APIs such as Reactions Component
3. State variables and state cells in DisplayScript.
4. Subscriptions in Rx.
5. Reducer components in ReasonReact.

The ESLint plugin enforces rules of Hooks to avoid bugs. It assumes that any function starting with ”use” and a capital letter right after it is a Hook. In particular, the rule enforces that,

1. Calls to Hooks are either inside a PascalCase function (assumed to be a component) or another useSomething function (assumed to be a custom Hook).
2. Hooks are called in the same order on every render.

When a user logs in and reload, to persist the state generally we add the load user action in the useEffect hooks in the main App.js. While using Redux, loadUser action can be easily accessed.

App.js

     import { loadUser } from "../actions/auth";
     store.dispatch(loadUser());
     

• But while using Context API, to access context in App.js, wrap the AuthState in index.js so that App.js can access the auth context. Now whenever the page reloads, no matter what route you are on, the user will be authenticated as loadUser action will be triggered on each re-render.

index.js

     import React from "react";
     import ReactDOM from "react-dom";
     import App from "./App";
     import AuthState from "./context/auth/AuthState";

     ReactDOM.render(
       <React.StrictMode>
         <AuthState>
           <App />
         </AuthState>
       </React.StrictMode>,
       document.getElementById("root")
     );
     

App.js

     const authContext = useContext(AuthContext);

     const { loadUser } = authContext;

     useEffect(() => {
       loadUser();
     }, []);
     

loadUser

     const loadUser = async () => {
       const token = sessionStorage.getItem("token");

       if (!token) {
         dispatch({
           type: ERROR,
         });
       }
       setAuthToken(token);

       try {
         const res = await axios("/api/auth");

         dispatch({
           type: USER_LOADED,
           payload: res.data.data,
         });
       } catch (err) {
         console.error(err);
       }
     };
     

> Modern React Note (React 18/19): ReactDOM.render was deprecated in React 18 and removed in React 19. In modern applications, always use createRoot from react-dom/client:
>

> import { createRoot } from 'react-dom/client';
> const root = createRoot(document.getElementById('root'));
> root.render(<App />);
> 

1. useState causes components to re-render after state updates whereas useRef doesn’t cause a component to re-render when the value or state changes.

Essentially, useRef is like a “box” that can hold a mutable value in its (.current) property.

1. useState allows us to update the state inside components. While useRef allows referencing DOM elements and tracking values.

useEffect and useLayoutEffect are both React hooks that can be used to synchronize a component with an external system, such as a browser API or a third-party library. However, there are some key differences between the two:

• Timing: useEffect runs after the browser has finished painting, while useLayoutEffect runs synchronously before the browser paints. This means that useLayoutEffect can be used to measure and update layout in a way that feels more synchronous to the user.

• Browser Paint: useEffect allows browser to paint the changes before running the effect, hence it may cause some visual flicker. useLayoutEffect synchronously runs the effect before browser paints and hence it will avoid visual flicker.

• Execution Order: The order in which multiple useEffect hooks are executed is determined by React and may not be predictable. However, the order in which multiple useLayoutEffect hooks are executed is determined by the order in which they were called.

• Error handling: useEffect has a built-in mechanism for handling errors that occur during the execution of the effect, so that it does not crash the entire application. useLayoutEffect does not have this mechanism, and errors that occur during the execution of the effect will crash the entire application.

In general, it's recommended to use useEffect as much as possible, because it is more performant and less prone to errors. useLayoutEffect should only be used when you need to measure or update layout, and you can't achieve the same result using useEffect.

The useContext hook is a built-in React Hook that lets you access the value of a context inside a functional component without needing to wrap it in a <Context.Consumer> component.

It helps you avoid prop drilling (passing props through multiple levels) by allowing components to access shared data like themes, authentication status, or user preferences.

The usage of useContext involves three main steps:
#### Step 1 : Create the Context

Use React.createContext() to create a context object.

        import React, { createContext } from 'react'; 
    
        const ThemeContext = createContext(); // default value optional
        

You typically export this so other components can import it.

#### Step 2: Provide the Context Value

Wrap your component tree (or a part of it) with the Context.Provider and pass a value prop.

        function App() {
            return ( 
                <ThemeContext.Provider value="dark">
                   <MyComponent />
                </ThemeContext.Provider>
            ); 
        }
        

Now any component inside <ThemeContext.Provider> can access the context value.

#### Step 3: Consume the Context with useContext

In any functional component inside the Provider, use the useContext hook:

        import { useContext } from 'react'; 
        function MyComponent() {
            const theme = useContext(ThemeContext); // theme = "dark"
            return <p>Current Theme: {theme}</p>; 
        }
        

The useContext hook in React is used to share data across components without having to pass props manually through each level. Here are some common and effective use cases:

1. Theme Customization

useContext can be used to manage application-wide themes, such as light and dark modes, ensuring consistent styling and enabling user-driven customization.

1. Localization and Internationalization

It supports localization by providing translated strings or locale-specific content to components, adapting the application for users in different regions.

1. User Authentication and Session Management

useContext allows global access to authentication status and user data. This enables conditional rendering of components and helps manage protected routes or user-specific UI elements.

1. Shared Modal or Sidebar Visibility

It's ideal for managing the visibility of shared UI components like modals, drawers, or sidebars, especially when their state needs to be controlled from various parts of the app.

1. Combining with useReducer for Global State Management

When combined with useReducer, useContext becomes a powerful tool for managing more complex global state logic. This pattern helps maintain cleaner, scalable state logic without introducing external libraries like Redux.
Some of the common use cases of useContext are listed below,

The useMemo() Hook in React is used to optimize performance by memoizing the result of expensive calculations. It ensures that a function is only re-executed when its dependencies change, preventing unnecessary computations on every re-render.

#### Syntax

      const memoizedValue = useMemo(() => computeExpensiveValue(arg), [dependencies]);
     

• computeExpensiveValue:

A function that returns the computed result.

• dependencies:

An array of values that, when changed, will cause the memoized function to re-run.

If the dependencies haven’t changed since the last render, React returns the cached result instead of re-running the function.

Let's exaplain the usage of useMemo hook with an example of user search and its respective filtered users list.

#### Example: Memoizing a Filtered List

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

      const users = [
        { id: 1, name: 'Sudheer' },
        { id: 2, name: 'Brendon' },
        { id: 3, name: 'Charlie' },
        { id: 4, name: 'Dary' },
        { id: 5, name: 'Eden' }
      ];

      export default function UserSearch({ users }) {
        const [searchTerm, setSearchTerm] = useState('');
        const [counter, setCounter] = useState(0);

        // Memoize the filtered user list based on the search term
        const filteredUsers = useMemo(() => {
          console.log("Filtering users...");
          return users.filter(user =>
            user.name.toLowerCase().includes(searchTerm.toLowerCase())
          );
        }, [searchTerm]);

        return (
          <div>
            <h2>Counter: {counter}</h2>
            <button onClick={() => setCounter(prev => prev + 1)}>Increment Counter</button>

            <h2>Search Users</h2>
            <input
              type="text"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Enter name"
            />

            <ul>
              {filteredUsers.map(user => (
                <li key={user.id}>{user.name}</li>
              ))}
            </ul>
          </div>
        );
      }
      

In the above example:

• The filteredUsers list is only recomputed when searchTerm changes.
• Pressing the "Increment Counter" button does not trigger the filtering logic again, as it's not a dependency.
• The console will only log "Filtering users..." when the search term updates.

No, Hooks cannot be used inside class components. They are specially designed for function components. This is because hooks depend on the sequence in which they are called during a component’s render, something that's only guaranteed in functional components. However, both class and function components can coexist in the same application.

Yes, it's common to combine useReducer with useContext to build a lightweight state management system similar to Redux:

      const AppContext = React.createContext();

      function AppProvider({ children }) {
        const [state, dispatch] = useReducer(reducer, initialState);
        return (
          <AppContext.Provider value={{ state, dispatch }}>
            {children}
          </AppContext.Provider>
        );
      }
      

The useContext hook can be used for authentication state management across multiple components and pages in a React application.

Let's build a simple authentication flow with:

• Login and Logout buttons
• Global AuthContext to share state
• Components that can access and update auth status

1. Create the Auth Context:

You can define AuthProvider which holds and provides user, login(), and logout() via context.

        // AuthContext.js
        import React, { createContext, useContext, useState } from 'react';
        
        const AuthContext = createContext();
        
        export function AuthProvider({ children }) {
          const [user, setUser] = useState(null);
        
          const login = (username) => setUser({ name: username });
          const logout = () => setUser(null);
        
          return (
            <AuthContext.Provider value={{ user, login, logout }}>
              {children}
            </AuthContext.Provider>
          );
        }
        
        // Custom hook for cleaner usage
        export const useAuth = () => useContext(AuthContext);
        

2. Wrap Your App with the Provider:

Wrap the above created provider in main App.js file

        // App.js
        import React from 'react';
        import { AuthProvider } from './AuthContext';
        import HomePage from './HomePage';
        import Dashboard from './Dashboard';
        
        function App() {
          return (
            <AuthProvider>
              <HomePage />
              <Dashboard />
            </AuthProvider>
          );
        }
        
        export default App;
        

3. Home page with login:
Read or access user and login details through custom useAuth hook and use it inside home page.

         // HomePage.js
         import React from 'react';
         import { useAuth } from './AuthContext';
    
         function HomePage() {
           const { user, login } = useAuth();
    
           return (
             <div>
               <h1>Home</h1>
               {user ? (
                 <p>Welcome back, {user.name}!</p>
               ) : (
                 <button onClick={() => login('Alice')}>Login</button>
               )}
             </div>
           );
         }
    
         export default HomePage;
        

4. Dashboard with logout:
Read or access user and logout details from useAuth custom hook and use it inside dashboard page.

        // Dashboard.js
        import React from 'react';
        import { useAuth } from './AuthContext';
        
        function Dashboard() {
          const { user, logout } = useAuth();
        
          if (!user) {
            return <p>Please login to view the dashboard.</p>;
          }
        
          return (
            <div>
              <h2>Dashboard</h2>
              <p>Logged in as: {user.name}</p>
              <button onClick={logout}>Logout</button>
            </div>
          );
        }
        
        export default Dashboard;
      

Yes, it is possible. You can use multiple contexts inside the same component by calling useContext multiple times, once for each context.

It can be achieved with below steps,

• Create multiple contexts using createContext().
• Wrap your component tree with multiple <Provider>s.
• Call useContext() separately for each context in the same component.

Example: Using ThemeContext and UserContext Together

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

      // Step 1: Create two contexts
      const ThemeContext = createContext();
      const UserContext = createContext();

      function Dashboard() {
        // Step 2: Use both contexts
        const theme = useContext(ThemeContext);
        const user = useContext(UserContext);

        return (
          <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
            <h1>Welcome, {user.name}</h1>
            <p>Current theme: {theme}</p>
          </div>
        );
      }

      // Step 3: Provide both contexts
      function App() {
        return (
          <ThemeContext.Provider value="dark">
            <UserContext.Provider value={{ name: 'Sudheer' }}>
              <Dashboard />
            </UserContext.Provider>
          </ThemeContext.Provider>
        );
      }

      export default App;
     

A common pitfall when using useContext with objects is triggering unnecessary re-renders across all consuming components — even when only part of the context value changes.

When you provide an object as the context value, React compares the entire object reference. If the object changes (even slightly), React assumes the whole context has changed, and all components using useContext(MyContext) will re-render, regardless of whether they use the part that changed.

Example:

        const MyContext = React.createContext();

        function MyProvider({ children }) {
          const [user, setUser] = useState(null);
          const [theme, setTheme] = useState('light');

          // This causes all consumers to re-render on any state change
          const contextValue = { user, setUser, theme, setTheme };

          return (
            <MyContext.Provider value={contextValue}>
              {children}
            </MyContext.Provider>
          );
        }
     

In this case, a change in theme will also trigger a re-render in components that only care about user.

This issue can be fixed in two ways,

1. Split Contexts
Create separate contexts for unrelated pieces of state:

     const UserContext = React.createContext(); 
     const ThemeContext = React.createContext();
     

2. Memoize Context Value
Use useMemo to prevent unnecessary re-renders:

       const contextValue = useMemo(() => ({ user, setUser, theme, setTheme }), [user, theme]);
     

However, this only helps if the object structure and dependencies are well controlled.

When a component calls useContext(SomeContext) but no matching <SomeContext.Provider> is present higher up in the component tree, the default value passed to React.createContext(defaultValue) is returned.

     const ThemeContext = React.createContext('light'); // 'light' is the default value
    
     function ThemedComponent() {
       const theme = useContext(ThemeContext);
       return <div>Current theme: {theme}</div>;
     }
    
     // No ThemeContext.Provider anywhere in the tree
     

In this case, theme will be 'light'. It's the default value you provided when you created the context.

Note: If you don’t specify a default value, the context value will be undefined when used without a provider:

     const AuthContext = React.createContext(); // No default
    
     function Profile() {
       const auth = useContext(AuthContext);
       // auth will be undefined if there's no AuthContext.Provider
     }
     

The useEffect hook accepts an optional dependencies argument that accepts an array of reactive values. The dependency array determines when the effect runs. i.e, It makes useEffect _reactive_ to changes in specified values.

#### How Dependency Array Affects Behavior

1. Empty Dependency Array: []

     useEffect(() => {
       // runs once after the initial render
     }, []);
     

• Effect runs only once (like componentDidMount).
• Ignores all state/prop changes.

1. With Specific Dependencies: [count, user]

     useEffect(() => {
       // runs after initial render
       // AND whenever `count` or `user` changes
     }, [count, user]);
     

• Effect runs on first render, and
• Again every time any dependency value changes.

1. No Dependency Array (Omitted)

          useEffect(() => {
            // runs after **every** render
          });
          

• Effect runs after every render, regardless of what changed.
• Can lead to performance issues if not used carefully.

React uses shallow comparison of the dependencies. If any value has changed (!==), the effect will re-run.

Note: This hook works well when dependencies are primitives or memoized objects/functions.

1. Setup Function Execution (useEffect)

The setup function (or the main function) you pass to useEffect runs at specific points:

1. After the component is mounted (if the dependency array is empty [])
2. After every render (if no dependency array is provided)
3. After a dependency value changes (if the dependency array contains variables)

1. Cleanup Function Execution (Returned function from useEffect)

The cleanup function is called before the effect is re-executed and when the component unmounts.

You should NOT return a Promise from useEffect. React expects the function passed to useEffect to return either nothing (undefined) or a cleanup function (synchronous function). i.e, It does not expect or handle a returned Promise. If you still return a Promise, React will ignore it silently, and it may lead to bugs or warnings in strict mode.

Incorrect:

      useEffect(async () => {
        await fetchData(); // ❌ useEffect shouldn't be async
      }, []);
      

Correct:

      useEffect(() => {
        const fetchData = async () => {
          const res = await fetch('/api');
          const data = await res.json();
          setData(data);
        };

        fetchData();
      }, []);
      

Yes, multiple useEffect hooks are allowed and recommended when you want to separate concerns.

      useEffect(() => {
        // Handles API fetch
      }, []);

      useEffect(() => {
        // Handles event listeners
      }, []);
      

Each effect runs independently and helps make code modular and easier to debug.

Infinite loops happen when the effect updates state that’s listed in its own dependency array, which causes the effect to re-run, updating state again and so on.

Infinite loop scenario:

        useEffect(() => {
          setCount(count + 1);
        }, [count]); // Triggers again every time count updates
        

You need to ensure that setState calls do not depend on values that cause the effect to rerun, or isolate them with a guard.

        useEffect(() => {
          if (count < 5) {
            setCount(count + 1);
          }
        }, [count]);
        

Some of the common cases are:

• Automatically focus an input when a component mounts.
• Scroll to a specific element.
• Measure element dimensions (offsetWidth, clientHeight).
• Control video/audio playback.
• Integrate with non-React libraries (like D3 or jQuery).

useImperativeHandle is a React Hook that allows a child component to expose custom functions or properties to its parent component, when using ref.
It is typically used with forwardRef and is very useful in cases like modals, dialogs, custom inputs, etc., where the parent needs to control behavior imperatively (e.g., open, close, reset).

Example: Dialog component

      import React, {
        useRef,
        useState,
        useImperativeHandle,
        forwardRef,
      } from 'react';
      import './Dialog.css'; 

      const Dialog = forwardRef((props, ref) => {
        const [isOpen, setIsOpen] = useState(false);
        const [formData, setFormData] = useState('');

        useImperativeHandle(ref, () => ({
          open: () => setIsOpen(true),
          close: () => setIsOpen(false),
          reset: () => setFormData(''),
        }));

        if (!isOpen) return null;

        return (
          <div className="dialog"> 
            <h2>Dialog</h2>
            <input
              type="text"
              value={formData}
              placeholder="Type something..."
              onChange={(e) => setFormData(e.target.value)}
            />
            <br />
            <button onClick={() => setIsOpen(false)}>Close</button>
          </div>
        );
      });

      function Parent() {
        const dialogRef = useRef();

        return (
          <div>
            <h1>useImperativeHandle Dialog Example</h1>
            <button onClick={() => dialogRef.current.open()}>Open Dialog</button>
            <button onClick={() => dialogRef.current.reset()}>Reset Dialog</button>
            <button onClick={() => dialogRef.current.close()}>Close Dialog</button>

            <Dialog ref={dialogRef} />
          </div>
        );
      }

      export default Parent;
      

No. useImperativeHandle only works when the component is wrapped in forwardRef. It's the combination that allows parent components to use a ref on a function component.

The following table compares both useMemo and useCallback:

| Feature | useMemo | useCallback |
| --- | --- | --- |
| Purpose | Memoizes the result of a computation | Memoizes a function reference |
| Returns | A value (e.g., result of a function) | A function |
| Usage | useMemo(() => computeValue(), [deps]) | useCallback(() => doSomething(), [deps]) |
| Primary Use Case | Avoid expensive recalculations | Prevent unnecessary re-creations of functions |
| Common Scenario | Filtering, sorting, calculating derived data | Passing callbacks to child components |
| When It's Useful | When the value is expensive to compute | When referential equality matters (e.g., props) |
| Recomputed When | Dependencies change | Dependencies change |
| Returned Value Type | Any (number, object, array, etc.) | Always a function |
| Overhead | Slight (evaluates a function and caches result) | Slight (caches a function reference) |

The useMemo hook does not directly prevent re-rendering of child components. Its main purpose is to memoize the result of an expensive computation so that it doesn’t get recalculated unless its dependencies change. While this can improve performance, it doesn’t inherently control whether a child component re-renders.

However, useMemo can help prevent re-renders when the memoized value is passed as a prop to a child component that is wrapped in React.memo. In that case, if the memoized value doesn’t change between renders (i.e., it has the same reference), React.memo can skip re-rendering the child. So, while useMemo doesn’t stop renders on its own, it works in combination with tools like React.memo to optimize rendering behavior.

The useCallback is a React Hook used to memoize function definitions between renders. It returns the same function reference unless its dependencies change. This is especially useful when passing callbacks to optimized child components (e.g. those wrapped in React.memo) to prevent unnecessary re-renders.

Example:

        const handleClick = useCallback(() => {
          console.log('Button clicked');
        }, []);
        

Without useCallback, a new function is created on every render, potentially causing child components to re-render unnecessarily.

Custom Hooks in React are JavaScript functions that allow you to extract and reuse component logic using React’s built-in Hooks like useState, useEffect, etc.

They start with the word "use" and let you encapsulate logic that multiple components might share—such as fetching data, handling forms, or managing timers—without repeating code.

Let's explain the custom hook usage with useFetchData example. The useFetchData custom Hook is a reusable function in React that simplifies the process of fetching data from an API. It encapsulates common logic such as initiating the fetch request, managing loading and error states, and storing the fetched data. By using built-in Hooks like useState and useEffect, useFetchData provides a clean interface that returns the data, loading, and error values, which can be directly used in components.

      import { useState, useEffect } from 'react';

      function useFetchData(url) {
        const [data, setData] = useState(null);     // Holds the response
        const [loading, setLoading] = useState(true); // Loading state
        const [error, setError] = useState(null);     // Error state

        useEffect(() => {
          let isMounted = true; // Prevent setting state on unmounted component
          setLoading(true);

          fetch(url)
            .then((response) => {
              if (!response.ok) throw new Error('Network response was not ok');
              return response.json();
            })
            .then((json) => {
              if (isMounted) {
                setData(json);
                setLoading(false);
              }
            })
            .catch((err) => {
              if (isMounted) {
                setError(err.message);
                setLoading(false);
              }
            });

          return () => {
            isMounted = false; // Clean-up function to avoid memory leaks
          };
        }, [url]);

        return { data, loading, error };
      }
      

The above custom hook can be used to retrieve users data for AuthorList, ReviewerList components.

Example: AuthorList component

      function AuthorList() {
        const { data, loading, error } = useFetchData('https://api.example.com/authors');

        if (loading) return <p>Loading authors...</p>;
        if (error) return <p>Error: {error}</p>;

        return (
          <ul>
            {data.map((author) => (
              <li key={author.id}>{author.name}</li>
            ))}
          </ul>
        );
      }
      

Some of the benefits of custom hooks are:

• Promotes code reuse
• Keeps components clean and focused
• Makes complex logic easier to test and maintain

The useId hook is a React hook introduced in React 18 that generates unique IDs that are stable across server and client renders. It's primarily used for accessibility attributes like linking form labels to inputs.

#### Syntax

     const id = useId();
     

#### Example: Accessible Form Input

     import { useId } from 'react';

     function EmailField() {
       const id = useId();
       
       return (
         <div>
           <label htmlFor={id}>Email:</label>
           <input id={id} type="email" />
         </div>
       );
     }
     

#### When to Use

• Generating unique IDs for form elements (htmlFor, aria-describedby, aria-labelledby)
• Creating stable IDs in server-side rendering (SSR) applications
• Avoiding ID collisions when the same component is rendered multiple times

#### When NOT to Use

• As keys in a list (use data-based keys instead)
• As CSS selectors or query selectors
• For any purpose that requires the ID to be predictable

Note: The IDs generated by useId contain colons (:) which may not work in CSS selectors. For multiple related IDs, you can use the same id as a prefix: ${id}-firstName, ${id}-lastName.

The useDeferredValue hook is used to defer updating a part of the UI to keep other parts responsive. It accepts a value and returns a "deferred" version of that value that may lag behind. This is useful for optimizing performance when rendering expensive components.

#### Syntax

     const deferredValue = useDeferredValue(value);
     

#### Example: Search with Deferred Results

     import { useState, useDeferredValue, useMemo } from 'react';

     function SearchResults({ query }) {
       // Expensive computation or large list filtering
       const results = useMemo(() => {
         return largeDataSet.filter(item => 
           item.name.toLowerCase().includes(query.toLowerCase())
         );
       }, [query]);

       return (
         <ul>
           {results.map(item => <li key={item.id}>{item.name}</li>)}
         </ul>
       );
     }

     function SearchPage() {
       const [query, setQuery] = useState('');
       const deferredQuery = useDeferredValue(query);
       const isStale = query !== deferredQuery;

       return (
         <div>
           <input 
             value={query} 
             onChange={(e) => setQuery(e.target.value)}
             placeholder="Search..."
           />
           <div style={{ opacity: isStale ? 0.5 : 1 }}>
             <SearchResults query={deferredQuery} />
           </div>
         </div>
       );
     }
     

The input stays responsive while the expensive SearchResults component re-renders with a slight delay using the deferred value.

The useTransition hook allows you to mark certain state updates as non-urgent transitions, keeping the UI responsive during expensive re-renders. It returns a isPending flag and a startTransition function.

#### Syntax

     const [isPending, startTransition] = useTransition();
     

#### Example: Tab Switching

     import { useState, useTransition } from 'react';

     function TabContainer() {
       const [isPending, startTransition] = useTransition();
       const [tab, setTab] = useState('home');

       function selectTab(nextTab) {
         startTransition(() => {
           setTab(nextTab);
         });
       }

       return (
         <div>
           <button onClick={() => selectTab('home')}>Home</button>
           <button onClick={() => selectTab('posts')}>Posts (slow)</button>
           <button onClick={() => selectTab('contact')}>Contact</button>
           
           {isPending && <Spinner />}
           
           {tab === 'home' && <HomeTab />}
           {tab === 'posts' && <PostsTab />}  {/* Expensive component */}
           {tab === 'contact' && <ContactTab />}
         </div>
       );
     }
     

#### Differences from useDeferredValue

| Feature | useTransition | useDeferredValue |
|---------|--------------|------------------|
| Controls | State updates (wraps setState) | Values (wraps a value) |
| Use case | When you control the state update | When you receive a value from props or other hooks |
| Returns | [isPending, startTransition] | Deferred value |
| Pending state | Built-in isPending flag | Manual comparison needed |

The useSyncExternalStore hook is designed to subscribe to external stores (non-React state sources) in a way that's compatible with concurrent rendering. It's primarily used by library authors for state management libraries.

#### Syntax

     const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?);
     

• subscribe: Function to subscribe to the store, returns an unsubscribe function
• getSnapshot: Function that returns the current store value
• getServerSnapshot: Optional function for SSR that returns the initial server snapshot

#### Example: Browser Online Status

     import { useSyncExternalStore } from 'react';

     function getSnapshot() {
       return navigator.onLine;
     }

     function subscribe(callback) {
       window.addEventListener('online', callback);
       window.addEventListener('offline', callback);
       return () => {
         window.removeEventListener('online', callback);
         window.removeEventListener('offline', callback);
       };
     }

     function useOnlineStatus() {
       return useSyncExternalStore(subscribe, getSnapshot, () => true);
     }

     function StatusBar() {
       const isOnline = useOnlineStatus();
       return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
     }
     

This hook ensures that when the external store changes, React re-renders consistently without tearing (showing inconsistent data).

The useInsertionEffect hook is designed for CSS-in-JS library authors to inject styles into the DOM before any layout effects run. It fires synchronously before DOM mutations.

#### Syntax

     useInsertionEffect(() => {
       // Insert styles here
       return () => {
         // Cleanup
       };
     }, [dependencies]);
     

#### Execution Order

     1. useInsertionEffect  → Inject styles
     2. DOM mutations       → React updates DOM
     3. useLayoutEffect     → Read layout, synchronously re-render if needed
     4. Browser paint       → User sees the result
     5. useEffect           → Side effects run
     

#### Example: Dynamic Style Injection

     import { useInsertionEffect } from 'react';

     let isInserted = new Set();

     function useCSS(rule) {
       useInsertionEffect(() => {
         if (!isInserted.has(rule)) {
           isInserted.add(rule);
           const style = document.createElement('style');
           style.textContent = rule;
           document.head.appendChild(style);
         }
       }, [rule]);
     }

     function Button() {
       useCSS('.dynamic-btn { background: blue; color: white; }');
       return <button className="dynamic-btn">Click me</button>;
     }
     

Note: This hook is not intended for application code. It's specifically for CSS-in-JS libraries like styled-components or Emotion to prevent style flickering.

Custom hooks allow you to extract and share stateful logic between components without changing their hierarchy. The state itself is not shared—each component using the hook gets its own isolated state.

#### Example: useLocalStorage Hook

     import { useState, useEffect } from 'react';

     function useLocalStorage(key, initialValue) {
       // Get stored value or use initial value
       const [storedValue, setStoredValue] = useState(() => {
         try {
           const item = window.localStorage.getItem(key);
           return item ? JSON.parse(item) : initialValue;
         } catch (error) {
           console.error(error);
           return initialValue;
         }
       });

       // Update localStorage when state changes
       useEffect(() => {
         try {
           window.localStorage.setItem(key, JSON.stringify(storedValue));
         } catch (error) {
           console.error(error);
         }
       }, [key, storedValue]);

       return [storedValue, setStoredValue];
     }

     // Usage in multiple components
     function ThemeToggle() {
       const [theme, setTheme] = useLocalStorage('theme', 'light');
       return (
         <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
           Current: {theme}
         </button>
       );
     }

     function FontSizeSelector() {
       const [fontSize, setFontSize] = useLocalStorage('fontSize', 16);
       return (
         <input 
           type="range" 
           value={fontSize} 
           onChange={(e) => setFontSize(Number(e.target.value))} 
         />
       );
     }
     

Both components use useLocalStorage, but each has its own independent state that persists to localStorage.

The useDebugValue hook is used to display a label for custom hooks in React DevTools. It helps developers debug custom hooks by showing meaningful information.

#### Syntax

     useDebugValue(value);
     useDebugValue(value, formatFn); // With optional formatter
     

#### Example: Custom Hook with Debug Value

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

     function useOnlineStatus() {
       const [isOnline, setIsOnline] = useState(true);

       useEffect(() => {
         const handleOnline = () => setIsOnline(true);
         const handleOffline = () => setIsOnline(false);
         
         window.addEventListener('online', handleOnline);
         window.addEventListener('offline', handleOffline);
         
         return () => {
           window.removeEventListener('online', handleOnline);
           window.removeEventListener('offline', handleOffline);
         };
       }, []);

       // Shows "OnlineStatus: Online" or "OnlineStatus: Offline" in DevTools
       useDebugValue(isOnline ? 'Online' : 'Offline');

       return isOnline;
     }
     

#### With Formatting Function (for expensive computations)

     function useUser(userId) {
       const [user, setUser] = useState(null);
       
       // The format function only runs when DevTools is open
       useDebugValue(user, (user) => user ? `User: ${user.name}` : 'Loading...');
       
       return user;
     }
     

Note: Only use useDebugValue in custom hooks that are part of shared libraries. It's not necessary for every custom hook in application code.

The cleanup function in useEffect is used to clean up side effects before the component unmounts or before the effect runs again. This prevents memory leaks, stale data, and unexpected behavior.

#### Syntax

     useEffect(() => {
       // Setup code
       
       return () => {
         // Cleanup code
       };
     }, [dependencies]);
     

#### Common Cleanup Scenarios

1. Event Listeners

     useEffect(() => {
       const handleResize = () => setWidth(window.innerWidth);
       window.addEventListener('resize', handleResize);
       
       return () => window.removeEventListener('resize', handleResize);
     }, []);
     

2. Timers and Intervals

     useEffect(() => {
       const intervalId = setInterval(() => {
         setCount(c => c + 1);
       }, 1000);
       
       return () => clearInterval(intervalId);
     }, []);
     

3. Subscriptions

     useEffect(() => {
       const subscription = dataSource.subscribe(handleChange);
       
       return () => subscription.unsubscribe();
     }, [dataSource]);
     

4. Abort Fetch Requests

     useEffect(() => {
       const controller = new AbortController();
       
       fetch(url, { signal: controller.signal })
         .then(response => response.json())
         .then(data => setData(data))
         .catch(err => {
           if (err.name !== 'AbortError') {
             setError(err);
           }
         });
       
       return () => controller.abort();
     }, [url]);
     

When Cleanup Runs:

• Before the component unmounts
• Before re-running the effect when dependencies change

useEvent is an experimental hook (not yet stable in React) designed to solve the problem of creating stable event handlers that always access the latest props and state without causing re-renders or needing to be in dependency arrays.

#### The Problem useEvent Solves

     // Problem: onTick changes on every render, causing interval to reset
     function Timer({ onTick }) {
       useEffect(() => {
         const id = setInterval(() => {
           onTick(); // Uses stale closure if onTick is not in deps
         }, 1000);
         return () => clearInterval(id);
       }, [onTick]); // Adding onTick causes interval to reset frequently
     }
     

#### Solution with useEvent (Experimental)

     import { useEvent } from 'react'; // Experimental

     function Timer({ onTick }) {
       const stableOnTick = useEvent(onTick);

       useEffect(() => {
         const id = setInterval(() => {
           stableOnTick(); // Always calls latest onTick
         }, 1000);
         return () => clearInterval(id);
       }, []); // No dependency needed!
     }
     

#### Key Differences

| Feature | useEffect | useEvent (experimental) |
|---------|-----------|------------------------|
| Purpose | Run side effects | Create stable callbacks |
| Runs | After render | During render (creates function) |
| Returns | Cleanup function | Stable event handler |
| Closure | Captures values at render time | Always accesses latest values |
| Dependencies | Must list all used values | Not needed in other hooks' deps |

Note: Until useEvent is stable, you can use useCallback with useRef as a workaround for stable callbacks.

Following best practices ensures your hooks are predictable, maintainable, and bug-free.

#### 1. Follow the Rules of Hooks

• Only call hooks at the top level (not inside loops, conditions, or nested functions)
• Only call hooks from React functions (components or custom hooks)

#### 2. Use the ESLint Plugin

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

     {
       "plugins": ["react-hooks"],
       "rules": {
         "react-hooks/rules-of-hooks": "error",
         "react-hooks/exhaustive-deps": "warn"
       }
     }
     

#### 3. Keep Hooks Focused and Simple

     // ❌ Bad: One hook doing too much
     function useEverything() {
       const [user, setUser] = useState(null);
       const [posts, setPosts] = useState([]);
       const [theme, setTheme] = useState('light');
       // ... lots of unrelated logic
     }

     // ✅ Good: Separate concerns
     function useUser() { /* user logic */ }
     function usePosts() { /* posts logic */ }
     function useTheme() { /* theme logic */ }
     

#### 4. Use Descriptive Names for Custom Hooks

     // ❌ Bad
     function useData() { }

     // ✅ Good
     function useUserAuthentication() { }
     function useFetchProducts() { }
     function useFormValidation() { }
     

#### 5. Properly Manage Dependencies

     // ❌ Bad: Missing dependency
     useEffect(() => {
       fetchUser(userId);
     }, []); // userId is missing

     // ✅ Good: All dependencies listed
     useEffect(() => {
       fetchUser(userId);
     }, [userId]);
     

#### 6. Avoid Inline Object/Function Dependencies

     // ❌ Bad: New object on every render
     useEffect(() => {
       doSomething(options);
     }, [{ page: 1, limit: 10 }]); // Always different reference

     // ✅ Good: Memoize or extract
     const options = useMemo(() => ({ page: 1, limit: 10 }), []);
     useEffect(() => {
       doSomething(options);
     }, [options]);
     

#### 7. Clean Up Side Effects
Always return a cleanup function when subscribing to events, timers, or external data sources.

## Modern React Features (React 18/19)

The use() hook allows you to read the value of a resource (Promise or Context) during render, with Suspense integration.

#### Reading Promises

     import { use, Suspense } from 'react';

     function UserProfile({ userPromise }) {
       const user = use(userPromise); // Suspends until resolved
       
       return (
         <div>
           <h1>{user.name}</h1>
           <p>{user.email}</p>
         </div>
       );
     }

     function App() {
       const userPromise = fetchUser(123);
       
       return (
         <Suspense fallback={<div>Loading...</div>}>
           <UserProfile userPromise={userPromise} />
         </Suspense>
       );
     }
     

#### Reading Context

     import { use } from 'react';
     import { ThemeContext } from './context';

     function Button() {
       const theme = use(ThemeContext);
       return <button className={theme}>Click me</button>;
     }
     

#### Key Differences from Other Hooks

| Feature | use() | useContext() | useState() |
|---------|-------|--------------|------------|
| Can be called conditionally | ✅ Yes | ❌ No | ❌ No |
| Can be called in loops | ✅ Yes | ❌ No | ❌ No |
| Suspends for Promises | ✅ Yes | ❌ N/A | ❌ N/A |
| Reads Context | ✅ Yes | ✅ Yes | ❌ N/A |

#### Conditional Usage (Unique!)

     function Component({ showUser, userPromise }) {
       // ✅ This is allowed with use()!
       const user = showUser ? use(userPromise) : null;
       
       return user ? <div>{user.name}</div> : <div>No user</div>;
     }
     

These hooks simplify form handling with Server Actions in React 19.

#### useFormState
Manages form state and handles server responses:

     'use client'
     import { useFormState } from 'react-dom';
     import { loginAction } from './actions';

     export default function LoginForm() {
       const [state, formAction] = useFormState(loginAction, {
         errors: {},
         message: ''
       });

       return (
         <form action={formAction}>
           <input name="email" type="email" />
           {state.errors.email && <p>{state.errors.email}</p>}
           
           <input name="password" type="password" />
           {state.errors.password && <p>{state.errors.password}</p>}
           
           <button type="submit">Login</button>
           {state.message && <p>{state.message}</p>}
         </form>
       );
     }
     

#### useFormStatus
Get the pending state of parent form:

     'use client'
     import { useFormStatus } from 'react-dom';

     function SubmitButton() {
       const { pending, data, method, action } = useFormStatus();
       
       return (
         <button type="submit" disabled={pending}>
           {pending ? 'Submitting...' : 'Submit'}
         </button>
       );
     }

     // Must be used in a child component of <form>
     export default function MyForm() {
       return (
         <form action={serverAction}>
           <input name="email" />
           <SubmitButton />
         </form>
       );
     }
     

#### Combining Both

     'use client'
     import { useFormState, useFormStatus } from 'react-dom';

     function SubmitButton() {
       const { pending } = useFormStatus();
       return (
         <button disabled={pending}>
           {pending ? '⏳ Saving...' : '💾 Save'}
         </button>
       );
     }

     export default function EditProfile() {
       const [state, formAction] = useFormState(updateProfile, null);

       return (
         <form action={formAction}>
           <input name="name" defaultValue={user.name} />
           <input name="bio" defaultValue={user.bio} />
           <SubmitButton />
           {state?.success && <p>✅ Profile updated!</p>}
           {state?.error && <p>❌ {state.error}</p>}
         </form>
       );
     }
     

#### Key Points

• useFormState: For managing server responses and errors
• useFormStatus: For UI feedback during submission
• useFormStatus must be used in a child component of the form
• Works seamlessly with Server Actions

useOptimistic enables optimistic UI updates - showing changes immediately before server confirmation.

#### Basic Usage

     import { useOptimistic } from 'react';

     function TodoList({ todos, addTodo }) {
       const [optimisticTodos, addOptimisticTodo] = useOptimistic(
         todos,
         (currentTodos, newTodo) => [...currentTodos, { ...newTodo, pending: true }]
       );

       async function handleSubmit(formData) {
         const title = formData.get('title');
         
         // Immediately show optimistic update
         addOptimisticTodo({ id: Date.now(), title });
         
         // Send to server
         await addTodo(title);
         // Component re-renders with real data when complete
       }

       return (
         <>
           <form action={handleSubmit}>
             <input name="title" />
             <button>Add</button>
           </form>
           
           <ul>
             {optimisticTodos.map(todo => (
               <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
                 {todo.title}
                 {todo.pending && ' ⏳'}
               </li>
             ))}
           </ul>
         </>
       );
     }
     

#### With Server Actions

     'use client'
     import { useOptimistic } from 'react';
     import { likePost } from './actions';

     export default function Post({ post, likes }) {
       const [optimisticLikes, addOptimisticLike] = useOptimistic(
         likes,
         (currentLikes, amount) => currentLikes + amount
       );

       async function handleLike() {
         addOptimisticLike(1); // Immediate UI update
         await likePost(post.id); // Server update
       }

       return (
         <div>
           <h2>{post.title}</h2>
           <button onClick={handleLike}>
             ❤️ {optimisticLikes} Likes
           </button>
         </div>
       );
     }
     

#### Complex Example with Error Handling

     function ShoppingCart({ items, removeItem }) {
       const [optimisticItems, removeOptimistic] = useOptimistic(
         items,
         (current, removedId) => current.filter(item => item.id !== removedId)
       );

       async function handleRemove(itemId) {
         removeOptimistic(itemId); // Immediate removal from UI
         
         try {
           await removeItem(itemId);
         } catch (error) {
           // Automatic rollback on error!
           toast.error('Failed to remove item');
         }
       }

       return (
         <ul>
           {optimisticItems.map(item => (
             <li key={item.id}>
               {item.name}
               <button onClick={() => handleRemove(item.id)}>Remove</button>
             </li>
           ))}
         </ul>
       );
     }
     

#### When to Use

• ✅ Toggling likes/favorites
• ✅ Adding/removing items from lists
• ✅ Sending messages in chat
• ✅ Any action where immediate feedback improves UX
• ❌ Financial transactions (wait for confirmation)
• ❌ Critical operations requiring server validation

Both Higher-Order Components (HOCs) and Hooks let you reuse logic across components, but they solve that problem in very different ways.

| Aspect | Higher-Order Components (HOCs) | Hooks |
| --- | --- | --- |
| Pattern | A function that takes a component and returns a new, enhanced component | A function called directly inside a function component |
| Component tree | Adds an extra wrapper component, which can lead to "wrapper hell" with multiple HOCs | Adds no extra components to the tree |
| Sharing logic | Injects props/behavior into the wrapped component | Shares stateful logic directly via custom hooks (useX) |
| Prop handling | Can cause prop name collisions when composing multiple HOCs | No prop collisions since state lives inside the component itself |
| Debugging | Harder to trace which HOC injected which prop (often needs displayName) | Easier to trace; shows up as plain hook calls in React DevTools |
| Usage | Works with both class and function components | Can only be used in function components (or other hooks) |

#### Example: sharing "toggle" logic

Using a HOC:

     function withToggle(WrappedComponent) {
       return function Enhanced(props) {
         const [on, setOn] = useState(false);
         const toggle = () => setOn((prev) => !prev);
         return <WrappedComponent {...props} on={on} toggle={toggle} />;
       };
     }

     const Modal = withToggle(BaseModal);
     

Using a custom Hook:

     function useToggle(initial = false) {
       const [on, setOn] = useState(initial);
       const toggle = () => setOn((prev) => !prev);
       return [on, toggle];
     }

     function Modal() {
       const [on, toggle] = useToggle();
       // ...
     }
     

In short, Hooks were introduced to solve the same logic-reuse problem as HOCs (and render props), but without adding extra components to the render tree—avoiding wrapper hell and making the code easier to read, type, and debug. See also [Do Hooks replace render props and higher-order components?](#do-hooks-replace-render-props-and-higher-order-components).

No. React.memo only performs a shallow comparison of a component's props — it has no visibility into context. If a component reads a value via useContext/Context.Consumer, that component re-renders whenever the context value changes, regardless of whether it's wrapped in React.memo and regardless of whether its own props changed.

     const CountContext = React.createContext();

     // Wrapping with React.memo does NOT help here
     const Display = React.memo(function Display() {
       const count = useContext(CountContext);
       return <div>{count}</div>;
     });

     function App() {
       const [count, setCount] = useState(0);
       return (
         <CountContext.Provider value={count}>
           <button onClick={() => setCount((c) => c + 1)}>Increment</button>
           <Display />
         </CountContext.Provider>
       );
     }
     

Every time count changes, Display re-renders even though it takes no props and is memoized — React.memo bails out based on prop equality, but context consumption bypasses that check entirely.

#### How to actually reduce these re-renders

• Split contexts by concern so a component only subscribes to the slice of state it actually needs (see [What's a common pitfall when using useContext with objects?](#whats-a-common-pitfall-when-using-usecontext-with-objects)).
• Memoize the provider's value with useMemo so the reference only changes when the underlying data changes — this reduces churn but doesn't stop consumers from re-rendering when the value itself legitimately changes.
• Push useContext down into a small wrapper component and pass the extracted value as a prop to a memoized child. The child (wrapped in React.memo) will now correctly skip re-rendering when that specific prop hasn't changed, since the memoization check happens one level below the context read.
• Use a state management library or selector-based API (Redux's useSelector, Zustand, Jotai) when you need fine-grained, per-field subscriptions instead of one large context object.

A reusable Context bundles the createContext call, its Provider (with local state/logic), and a custom hook to consume it into a single module. This hides the raw Context object from consumers, provides a clear API, and lets you validate that the hook is used within its provider.

     // ThemeContext.js
     import { createContext, useContext, useMemo, useState } from "react";

     const ThemeContext = createContext(undefined);

     export function ThemeProvider({ children }) {
       const [theme, setTheme] = useState("light");

       const toggleTheme = () =>
         setTheme((prev) => (prev === "light" ? "dark" : "light"));

       // Memoize so the value reference is stable across renders
       const value = useMemo(() => ({ theme, toggleTheme }), [theme]);

       return (
         <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
       );
     }

     // Custom hook consumers use instead of importing ThemeContext directly
     export function useTheme() {
       const context = useContext(ThemeContext);
       if (context === undefined) {
         throw new Error("useTheme must be used within a ThemeProvider");
       }
       return context;
     }
     

     // App.js
     function App() {
       return (
         <ThemeProvider>
           <Toolbar />
         </ThemeProvider>
       );
     }

     function Toolbar() {
       const { theme, toggleTheme } = useTheme();
       return <button onClick={toggleTheme}>Current theme: {theme}</button>;
     }
     

#### Why wrap Context like this?

1. Encapsulation: Consumers never import or touch the raw Context object, so its internal shape can change without breaking callers.
2. Guardrails: The custom hook throws a clear error if used outside its provider, instead of silently returning undefined.
3. Colocation: State, updater functions, and derived values live next to the provider, making the context self-contained and easy to test in isolation.
4. Composability: Multiple reusable contexts (theme, auth, locale, etc.) can be combined by nesting providers, or composed with a helper that merges them.
5. Performance-friendly: Memoizing the provider's value (with useMemo) avoids creating a new object on every render, reducing unnecessary consumer re-renders (see [Does React.memo prevent Context consumers from re-rendering?](#does-reactmemo-prevent-context-consumers-from-re-rendering)).

The component lifecycle has three distinct lifecycle phases:

1. Mounting: The component is ready to mount in the browser DOM. This phase covers initialization from constructor(), getDerivedStateFromProps(), render(), and componentDidMount() lifecycle methods.

1. Updating: In this phase, the component gets updated in two ways, sending the new props and updating the state either from setState() or forceUpdate(). This phase covers getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate() lifecycle methods.

1. Unmounting: In this last phase, the component is not needed and gets unmounted from the browser DOM. This phase includes componentWillUnmount() lifecycle method.

It's worth mentioning that React internally has a concept of phases when applying changes to the DOM. They are separated as follows

1. Render The component will render without any side effects. This applies to Pure components and in this phase, React can pause, abort, or restart the render.

1. Pre-commit Before the component actually applies the changes to the DOM, there is a moment that allows React to read from the DOM through the getSnapshotBeforeUpdate().

1. Commit React works with the DOM and executes the final lifecycles respectively componentDidMount() for mounting, componentDidUpdate() for updating, and componentWillUnmount() for unmounting.

React 16.3+ Phases (or an interactive version)


Before React 16.3


Before React 16.3

• componentWillMount: Executed before rendering and is used for App level configuration in your root component.
• componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur.
• componentWillReceiveProps: Executed when particular prop updates to trigger state transitions.
• shouldComponentUpdate: Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives new prop.
• componentWillUpdate: Executed before re-rendering the component when there are props & state changes confirmed by shouldComponentUpdate() which returns true.
• componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes.
• componentWillUnmount: It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.

React 16.3+

• getDerivedStateFromProps: Invoked right before calling render() and is invoked on _every_ render. This exists for rare use cases where you need a derived state. Worth reading if you need derived state.
• componentDidMount: Executed after first rendering and where all AJAX requests, DOM or state updates, and set up event listeners should occur.
• shouldComponentUpdate: Determines if the component will be updated or not. By default, it returns true. If you are sure that the component doesn't need to render after the state or props are updated, you can return a false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives a new prop.
• getSnapshotBeforeUpdate: Executed right before rendered output is committed to the DOM. Any value returned by this will be passed into componentDidUpdate(). This is useful to capture information from the DOM i.e. scroll position.
• componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes. This will not fire if shouldComponentUpdate() returns false.
• componentWillUnmount It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.

> Modern React Note: componentWillMount, componentWillReceiveProps, and componentWillUpdate are legacy lifecycles deprecated since React 16.3 and removed in modern React. In modern functional React, use the useEffect Hook or derive state values directly during render.

_Context_ provides a way to pass data through the component tree without having to pass props down manually at every level.

For example, authenticated users, locale preferences, UI themes need to be accessed in the application by many components.

    const { Provider, Consumer } = React.createContext(defaultValue);
    

The lifecycle methods are called in the following order when an instance of a component is being created and inserted into the DOM.

1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()

⚠️ FULLY DEPRECATED: These lifecycle methods have been deprecated and removed from React 17+.

The following lifecycle methods were deprecated due to unsafe coding practices and problems with async rendering:

1. componentWillMount() - REMOVED in React 17
2. componentWillReceiveProps() - REMOVED in React 17
3. componentWillUpdate() - REMOVED in React 17

Timeline:

• React 16.3: Methods aliased with UNSAFE_ prefix
• React 17+: Unprefixed versions completely removed
• Current (React 18/19): Only UNSAFE_ versions exist (not recommended)

Modern Alternatives:

| Deprecated Method | Modern Replacement |
|---|---|
| componentWillMount() | constructor() or componentDidMount() |
| componentWillReceiveProps() | static getDerivedStateFromProps() or componentDidUpdate() |
| componentWillUpdate() | getSnapshotBeforeUpdate() + componentDidUpdate() |

Best Practice: Use functional components with hooks instead:

• useEffect() for side effects
• useState() for state management
• useMemo()/useCallback() for optimization

The new static getDerivedStateFromProps() lifecycle method is invoked after a component is instantiated as well as before it is re-rendered. It can return an object to update state, or null to indicate that the new props do not require any state updates.

    class MyComponent extends React.Component {
      static getDerivedStateFromProps(props, state) {
        // ...
      }
    }
    

This lifecycle method along with componentDidUpdate() covers all the use cases of componentWillReceiveProps().

> Modern React Note: componentWillMount, componentWillReceiveProps, and componentWillUpdate are legacy lifecycles deprecated since React 16.3 and removed in modern React. In modern functional React, use the useEffect Hook or derive state values directly during render.

The new getSnapshotBeforeUpdate() lifecycle method is called right before DOM updates. The return value from this method will be passed as the third parameter to componentDidUpdate().

    class MyComponent extends React.Component {
      getSnapshotBeforeUpdate(prevProps, prevState) {
        // ...
      }
    }
    

This lifecycle method along with componentDidUpdate() covers all the use cases of componentWillUpdate().

> Modern React Note: componentWillMount, componentWillReceiveProps, and componentWillUpdate are legacy lifecycles deprecated since React 16.3 and removed in modern React. In modern functional React, use the useEffect Hook or derive state values directly during render.

You can use AJAX libraries such as Axios, jQuery AJAX, and the browser built-in fetch. You should fetch data in the componentDidMount() lifecycle method. This is so you can use setState() to update your component when the data is retrieved.

For example, the employees list fetched from API and set local state:

```jsx harmony
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
employees: [],
error: null,
};
}

componentDidMount() {
fetch("https://api.example.com/items")
.then((res) => res.json())
.then(
(result) => {
this.setState({
employees: result.employees,
});
},
(error) => {
this.setState({ error });
}
);
}

render() {
const { error, employees } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else {
return (
<ul>
{employees.map((employee) => (
<li key={employee.name}>
{employee.name}-{employee.experience}
</li>
))}
</ul>
);
}
}
}
```

React.forwardRef accepts a render function as parameter and DevTools uses this function to determine what to display for the ref forwarding component.

For example, If you don't name the render function or not using displayName property then it will appear as ”ForwardRef” in the DevTools,

    const WrappedComponent = React.forwardRef((props, ref) => {
      return <LogProps {...props} forwardedRef={ref} />;
    });
    

But If you name the render function then it will appear as ”ForwardRef(myFunction)”

    const WrappedComponent = React.forwardRef(function myFunction(props, ref) {
      return <LogProps {...props} forwardedRef={ref} />;
    });
    

As an alternative, You can also set displayName property for forwardRef function,

    function logProps(Component) {
      class LogProps extends React.Component {
        // ...
      }

      function forwardRef(props, ref) {
        return <LogProps {...props} forwardedRef={ref} />;
      }

      // Give this component a more helpful display name in DevTools.
      // e.g. "ForwardRef(logProps(MyComponent))"
      const name = Component.displayName || Component.name;
      forwardRef.displayName = `logProps(${name})`;

      return React.forwardRef(forwardRef);
    }
    

Context is designed to share data that can be considered global for a tree of React components.

For example, in the code below lets manually thread through a “theme” prop in order to style the Button component.

    //Lets create a context with a default theme value "luna"
    const ThemeContext = React.createContext("luna");
    // Create App component where it uses provider to pass theme value in the tree
    class App extends React.Component {
      render() {
        return (
          <ThemeContext.Provider value="nova">
            <Toolbar />
          </ThemeContext.Provider>
        );
      }
    }
    // A middle component where you don't need to pass theme prop anymore
    function Toolbar(props) {
      return (
        <div>
          <ThemedButton />
        </div>
      );
    }
    // Lets read theme value in the button component to use
    class ThemedButton extends React.Component {
      static contextType = ThemeContext;
      render() {
        return <Button theme={this.context} />;
      }
    }
    

ContextType is used to consume the context object. The contextType property can be used in two ways,

1. contextType as property of class:

The contextType property on a class can be assigned a Context object created by React.createContext(). After that, you can consume the nearest current value of that Context type using this.context in any of the lifecycle methods and render function.

Lets assign contextType property on MyClass as below,

        class MyClass extends React.Component {
          componentDidMount() {
            let value = this.context;
            /* perform a side-effect at mount using the value of MyContext */
          }
          componentDidUpdate() {
            let value = this.context;
            /* ... */
          }
          componentWillUnmount() {
            let value = this.context;
            /* ... */
          }
          render() {
            let value = this.context;
            /* render something based on the value of MyContext */
          }
        }
        MyClass.contextType = MyContext;
        

1. Static field

You can use a static class field to initialize your contextType using public class field syntax.

        class MyClass extends React.Component {
          static contextType = MyContext;
          render() {
            let value = this.context;
            /* render something based on the value */
          }
        }
        

The context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider’s parent re-renders.

For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for value.

    class App extends React.Component {
      render() {
        return (
          <Provider value={{ something: "something" }}>
            <Toolbar />
          </Provider>
        );
      }
    }
    

This can be solved by lifting up the value to parent state,

    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          value: { something: "something" },
        };
      }

      render() {
        return (
          <Provider value={this.state.value}>
            <Toolbar />
          </Provider>
        );
      }
    }