reactjs-interview-questions Documentation

const ChildComponent = ({ name, age, gender = "male" }) => {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
      <p>{gender}</p>
    </div>
  );
};

import React from "react";
import ReactDOM from "react-dom";

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.name}</p>
        <p>{this.props.age}</p>
        <p>{this.props.gender}</p>
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent name="John" age="30" gender="male" />
        <ChildComponent name="Mary" age="25" gender="female" />
      </div>
    );
  }
}

import React, { useState } from "react";

function UserProfile() {
  const [username, setUsername] = useState("");

  const handleChange = (e) => {
    setUsername(e.target.value);
  };

  return (
    <form>
      <label>
        Name:
        <input type="text" value={username} onChange={handleChange} />
      </label>
    </form>
  );
}

import { withRouter } from "react-router-dom"; // this also works with 'react-router-native'

        const Button = withRouter(({ history }) => (
           {
              history.push("/new-location");
            }}
          >
            {"Click Me!"}
          
        ));
        ```

    2.  **Using `<Route>` component and render props pattern:**

        The `<Route>` component passes the same props as `withRouter()`, so you will be able to access the history methods through the history prop.

        ```jsx harmony
        import { Route } from "react-router-dom";

        const Button = () => (
          <Route
            render={({ history }) => (
               {
                  history.push("/new-location");
                }}
              >
                {"Click Me!"}
              
            )}
          />
        );
        ```

    3.  **Using context:**

        This option is not recommended and treated as unstable API.

        ```jsx harmony
        const Button = (props, context) => (
           {
              context.history.push("/new-location");
            }}
          >
            {"Click Me!"}
          
        );

        Button.contextTypes = {
          history: React.PropTypes.shape({
            push: React.PropTypes.func.isRequired,
          }),
        };
        ```

**[⬆ Back to Top](#table-of-contents)**

84. ### How to get query parameters in React Router v4?

    The ability to parse query strings was taken out of React Router v4 because there have been user requests over the years to support different implementation. So the decision has been given to users to choose the implementation they like. The recommended approach is to use query strings library.

    ```javascript
    const queryString = require("query-string");
    const parsed = queryString.parse(props.location.search);
    ```

    You can also use `URLSearchParams` if you want something native:

    ```javascript
    const params = new URLSearchParams(props.location.search);
    const foo = params.get("name");
    ```

    You should use a _polyfill_ for IE11.

**[⬆ Back to Top](#table-of-contents)**

85. ### Why you get "Router may have only one child element" warning?

    You have to wrap your Route's in a `<Switch>` block because `<Switch>` is unique in that it renders a route exclusively.

    At first you need to add `Switch` to your imports:

    ```javascript
    import { Switch, Router, Route } from "react-router";
    ```

    Then define the routes within `<Switch>` block:

    ```jsx harmony
    <Router>
      <Switch>
        <Route {/* ... */} />
        <Route {/* ... */} />
      </Switch>
    </Router>
    ```

**[⬆ Back to Top](#table-of-contents)**

86. ### How to pass params to `history.push` method in React Router v4?

    While navigating you can pass props to the `history` object:

    ```javascript
    this.props.history.push({
      pathname: "/template",
      search: "?name=sudheer",
      state: { detail: response.data },
    });
    ```

    The `search` property is used to pass query params in `push()` method.

**[⬆ Back to Top](#table-of-contents)**

87. ### How to implement _default_ or _NotFound_ page?

    A `<Switch>` renders the first child `<Route>` that matches. A `<Route>` with no path always matches. So you just need to simply drop path attribute as below

    ```jsx harmony
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/user" component={User} />
      <Route component={NotFound} />
    </Switch>
    ```

**[⬆ Back to Top](#table-of-contents)**

88. ### How to get history on React Router v4?

    Below are the list of steps to get history object on React Router v4,

    1.  Create a module that exports a `history` object and import this module across the project.

        For example, create `history.js` file:

        ```javascript
        import { createBrowserHistory } from "history";

        export default createBrowserHistory({
          /* pass a configuration object here if needed */
        });
        ```

    2.  You should use the `<Router>` component instead of built-in routers. Import the above `history.js` inside `index.js` file:

        ```jsx harmony
        import { Router } from "react-router-dom";
        import history from "./history";
        import App from "./App";

        ReactDOM.render(
          <Router history={history}>
            <App />
          </Router>,
          holder
        );
        ```

    3.  You can also use push method of `history` object similar to built-in history object:

        ```javascript
        // some-other-file.js
        import history from "./history";

        history.push("/go-here");
        ```

**[⬆ Back to Top](#table-of-contents)**

89. ### How to perform automatic redirect after login?

    The `react-router` package provides `<Redirect>` component in React Router. Rendering a `<Redirect>` will navigate to a new location. Like server-side redirects, the new location will override the current location in the history stack.

    ```javascript
    import { Redirect } from "react-router";

    export default function Login {
        if (this.state.isLoggedIn === true) {
          return <Redirect to="/your/redirect/page" />;
        } else {
          return {"Login Please"};
        }
    }
    ```

      <details><summary><b>See Class</b></summary>
      <p>

    ```jsx
    import React, { Component } from "react";
    import { Redirect } from "react-router";

    export default class LoginComponent extends Component {
      render() {
        if (this.state.isLoggedIn === true) {
          return <Redirect to="/your/redirect/page" />;
        } else {
          return {"Login Please"};
        }
      }
    }
    ```

       </p>
       </details>

**[⬆ Back to Top](#table-of-contents)**

## React Internationalization

90. ### What is React Intl?

    The _React Intl_ library makes internationalization in React straightforward, with off-the-shelf components and an API that can handle everything from formatting strings, dates, and numbers, to pluralization. React Intl is part of _FormatJS_ which provides bindings to React via its components and API.

**[⬆ Back to Top](#table-of-contents)**

91. ### What are the main features of React Intl?

    Below are the main features of React Intl,

    1.  Display numbers with separators.
    2.  Display dates and times correctly.
    3.  Display dates relative to "now".
    4.  Pluralize labels in strings.
    5.  Support for 150+ languages.
    6.  Runs in the browser and Node.
    7.  Built on standards.

**[⬆ Back to Top](#table-of-contents)**

92. ### What are the two ways of formatting in React Intl?

    The library provides two ways to format strings, numbers, and dates:

    1.  **Using react components:**

        ```jsx harmony
        <FormattedMessage
          id={"account"}
          defaultMessage={"The amount is less than minimum balance."}
        />
        ```

    2.  **Using an API:**

        ```javascript
        const messages = defineMessages({
          accountMessage: {
            id: "account",
            defaultMessage: "The amount is less than minimum balance.",
          },
        });

        formatMessage(messages.accountMessage);
        ```

**[⬆ Back to Top](#table-of-contents)**

93. ### How to use `<FormattedMessage>` as placeholder using React Intl?

    The `<Formatted... />` components from `react-intl` return elements, not plain text, so they can't be used for placeholders, alt text, etc. In that case, you should use lower level API `formatMessage()`. You can inject the `intl` object into your component using `injectIntl()` higher-order component and then format the message using `formatMessage()` available on that object.

    ```jsx harmony
    import React from "react";
    import { injectIntl, intlShape } from "react-intl";

    const MyComponent = ({ intl }) => {
      const placeholder = intl.formatMessage({ id: "messageId" });
      return ;
    };

    MyComponent.propTypes = {
      intl: intlShape.isRequired,
    };

    export default injectIntl(MyComponent);
    ```

**[⬆ Back to Top](#table-of-contents)**

94. ### How to access current locale with React Intl?

    You can get the current locale in any component of your application using `injectIntl()`:

    ```jsx harmony
    import { injectIntl, intlShape } from "react-intl";

    const MyComponent = ({ intl }) => (
      {`The current locale is ${intl.locale}`}
    );

    MyComponent.propTypes = {
      intl: intlShape.isRequired,
    };

    export default injectIntl(MyComponent);
    ```

**[⬆ Back to Top](#table-of-contents)**

95. ### How to format date using React Intl?

     The `injectIntl()` higher-order component will give you access to the `formatDate()` method via the props in your component. The method is used internally by instances of `FormattedDate` and it returns the string representation of the formatted date.

     ```jsx harmony
     import { injectIntl, intlShape } from "react-intl";

     const stringDate = this.props.intl.formatDate(date, {
       year: "numeric",
       month: "numeric",
       day: "numeric",
     });

     const MyComponent = ({ intl }) => (
       {`The formatted date is ${stringDate}`}
     );

     MyComponent.propTypes = {
       intl: intlShape.isRequired,
     };

     export default injectIntl(MyComponent);
     ```

    **[⬆ Back to Top](#table-of-contents)**

## React Testing

96. ### What is Shallow Renderer in React testing?

    _Shallow rendering_ is useful for writing unit test cases in React. It lets you render a component _one level deep_ and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered.

    For example, if you have the following component:

    ```javascript
    function MyComponent() {
      return (
        
          {"Title"}
          {"Description"}
        
      );
    }
    ```

    Then you can assert as follows:

    ```jsx harmony
    import ShallowRenderer from "react-test-renderer/shallow";

    // in your test
    const renderer = new ShallowRenderer();
    renderer.render(<MyComponent />);

    const result = renderer.getRenderOutput();

    expect(result.type).toBe("div");
    expect(result.props.children).toEqual([
      {"Title"},
      {"Description"},
    ]);
    ```

**[⬆ Back to Top](#table-of-contents)**

97. ### What is `TestRenderer` package in React?

    This package provides a renderer that can be used to render components to pure JavaScript objects, without depending on the DOM or a native mobile environment. This package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a ReactDOM or React Native without using a browser or `jsdom`.

    ```jsx harmony
    import TestRenderer from "react-test-renderer";

    const Link = ({ page, children }) => <a href={page}>{children}</a>;

    const testRenderer = TestRenderer.create(
      <Link page={"https://www.facebook.com/"}>{"Facebook"}</Link>
    );

    console.log(testRenderer.toJSON());
    // {
    //   type: 'a',
    //   props: { href: 'https://www.facebook.com/' },
    //   children: [ 'Facebook' ]
    // }
    ```

**[⬆ Back to Top](#table-of-contents)**

98. ### What is the purpose of ReactTestUtils package?

    _ReactTestUtils_ are provided in the `with-addons` package and allow you to perform actions against a simulated DOM for the purpose of unit testing.

**[⬆ Back to Top](#table-of-contents)**

99. ### What is Jest?

    _Jest_ is a JavaScript unit testing framework created by Facebook based on Jasmine and provides automated mock creation and a `jsdom` environment. It's often used for testing components.

**[⬆ Back to Top](#table-of-contents)**

100. ### What are the advantages of Jest over Jasmine?

     There are couple of advantages compared to Jasmine:

     - Automatically finds tests to execute in your source code.
     - Automatically mocks dependencies when running your tests.
     - Allows you to test asynchronous code synchronously.
     - Runs your tests with a fake DOM implementation (via `jsdom`) so that your tests can be run on the command line.
     - Runs tests in parallel processes so that they finish sooner.

**[⬆ Back to Top](#table-of-contents)**

101. ### Give a simple example of Jest test case

     Let's write a test for a function that adds two numbers in `sum.js` file:

     ```javascript
     const sum = (a, b) => a + b;

     export default sum;
     ```

     Create a file named `sum.test.js` which contains actual test:

     ```javascript
     import sum from "./sum";

     test("adds 1 + 2 to equal 3", () => {
       expect(sum(1, 2)).toBe(3);
     });
     ```

     And then add the following section to your `package.json`:

     ```json
     {
       "scripts": {
         "test": "jest"
       }
     }
     ```

     Finally, run `yarn test` or `npm test` and Jest will print a result:

     ```console
     $ yarn test
     PASS ./sum.test.js
     ✓ adds 1 + 2 to equal 3 (2ms)
     ```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
      const store = createStore(reducer);
      ```
     2. **State is read-only:** The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state.
      ```js
      const action = { type: 'INCREMENT' };
      store.dispatch(action);
      ```
     3. **Changes are made with pure functions(Reducers):** To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters, and return the next state.
      
      ```jsx
      function counter(state = 0, action) {
        switch (action.type) {
          case 'INCREMENT':
            return state + 1;
          case 'DECREMENT':
            return state - 1;
          default:
            return state;
        }
      }
      ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
     const mapStateToProps = (state) => {
       return {
         todos: getVisibleTodos(state.todos, state.visibilityFilter),
       };
     };
     ```

     `mapDispatchToProps()` is a utility which will help your component to fire an action event (dispatching action which may cause change of application state):

     ```javascript
     const mapDispatchToProps = (dispatch) => {
       return {
         onTodoClick: (id) => {
           dispatch(toggleTodo(id));
         },
       };
     };
     ```

     It is recommended to always use the “object shorthand” form for the `mapDispatchToProps`.

     Redux wraps it in another function that looks like (…args) => dispatch(onTodoClick(…args)), and pass that wrapper function as a prop to your component.

     ```javascript
     const mapDispatchToProps = {
       onTodoClick,
     };
     ```

**[⬆ Back to Top](#table-of-contents)**

107. ### Can I dispatch an action in reducer?

     Dispatching an action within a reducer is an **anti-pattern**. Your reducer should be _without side effects_, simply digesting the action payload and returning a new state object. Adding listeners and dispatching actions within the reducer can lead to chained actions and other side effects.

**[⬆ Back to Top](#table-of-contents)**

108. ### How to access Redux store outside a component?

     You just need to export the store from the module where it created with `createStore()`. Also, it shouldn't pollute the global window object.

     ```javascript
     store = createStore(myReducer);

     export default store;
     ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
     const appReducer = combineReducers({
       /* your app's top-level reducers */
     });

     const rootReducer = (state, action) => {
       if (action.type === "USER_LOGOUT") {
         state = undefined;
       }

       return appReducer(state, action);
     };
     ```

     In case of using `redux-persist`, you may also need to clean your storage. `redux-persist` keeps a copy of your state in a storage engine. First, you need to import the appropriate storage engine and then, to parse the state before setting it to undefined and clean each storage state key.

     ```javascript
     const appReducer = combineReducers({
       /* your app's top-level reducers */
     });

     const rootReducer = (state, action) => {
       if (action.type === "USER_LOGOUT") {
         Object.keys(state).forEach((key) => {
           storage.removeItem(`persist:${key}`);
         });

         state = undefined;
       }

       return appReducer(state, action);
     };
     ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
     export function fetchAccount(id) {
       return (dispatch) => {
         dispatch(setLoadingAccountState()); // Show a loading spinner
         fetch(`/account/${id}`, (response) => {
           dispatch(doneFetchingAccount()); // Hide loading spinner
           if (response.status === 200) {
             dispatch(setAccount(response.json)); // Use a normal function to set the received state
           } else {
             dispatch(someError);
           }
         });
       };
     }

     function setAccount(data) {
       return { type: "SET_Account", data: data };
     }
     ```

**[⬆ Back to Top](#table-of-contents)**

115. ### Should I keep all component's state in Redux store?

     Keep your data in the Redux store, and the UI related state internally in the component.

**[⬆ Back to Top](#table-of-contents)**

116. ### What is the proper way to access Redux store?

     The best way to access your store in a component is to use the `connect()` function, that creates a new component that wraps around your existing one. This pattern is called _Higher-Order Components_, and is generally the preferred way of extending a component's functionality in React. This allows you to map state and action creators to your component, and have them passed in automatically as your store updates.

     Let's take an example of `<FilterLink>` component using connect:

     ```javascript
     import { connect } from "react-redux";
     import { setVisibilityFilter } from "../actions";
     import Link from "../components/Link";

     const mapStateToProps = (state, ownProps) => ({
       active: ownProps.filter === state.visibilityFilter,
     });

     const mapDispatchToProps = (dispatch, ownProps) => ({
       onClick: () => dispatch(setVisibilityFilter(ownProps.filter)),
     });

     const FilterLink = connect(mapStateToProps, mapDispatchToProps)(Link);

     export default FilterLink;
     ```

     Due to it having quite a few performance optimizations and generally being less likely to cause bugs, the Redux developers almost always recommend using `connect()` over accessing the store directly (using context API).

     ```javascript
     function MyComponent {
       someMethod() {
         doSomethingWith(this.context.store);
       }
     }
     ```

**[⬆ Back to Top](#table-of-contents)**

117. ### What is the difference between component and container in React Redux?

     **Component** is a class or function component that describes the presentational part of your application.

     **Container** is an informal term for a component that is connected to a Redux store. Containers _subscribe_ to Redux state updates and _dispatch_ actions, and they usually don't render DOM elements; they delegate rendering to presentational child components.

**[⬆ Back to Top](#table-of-contents)**

118. ### What is the purpose of the constants in Redux?

     Constants allows you to easily find all usages of that specific functionality across the project when you use an IDE. It also prevents you from introducing silly bugs caused by typos – in which case, you will get a `ReferenceError` immediately.

     Normally we will save them in a single file (`constants.js` or `actionTypes.js`).

     ```javascript
     export const ADD_TODO = "ADD_TODO";
     export const DELETE_TODO = "DELETE_TODO";
     export const EDIT_TODO = "EDIT_TODO";
     export const COMPLETE_TODO = "COMPLETE_TODO";
     export const COMPLETE_ALL = "COMPLETE_ALL";
     export const CLEAR_COMPLETED = "CLEAR_COMPLETED";
     ```

     In Redux, you use them in two places:

     1. **During action creation:**

        Let's take `actions.js`:

        ```javascript
        import { ADD_TODO } from "./actionTypes";

        export function addTodo(text) {
          return { type: ADD_TODO, text };
        }
        ```

     2. **In reducers:**

        Let's create `reducer.js`:

        ```javascript
        import { ADD_TODO } from "./actionTypes";

        export default (state = [], action) => {
          switch (action.type) {
            case ADD_TODO:
              return [
                ...state,
                {
                  text: action.text,
                  completed: false,
                },
              ];
            default:
              return state;
          }
        };
        ```

**[⬆ Back to Top](#table-of-contents)**

119. ### What are the different ways to write `mapDispatchToProps()`?

     There are a few ways of binding _action creators_ to `dispatch()` in `mapDispatchToProps()`.

     Below are the possible options:

     ```javascript
     const mapDispatchToProps = (dispatch) => ({
       action: () => dispatch(action()),
     });
     ```

     ```javascript
     const mapDispatchToProps = (dispatch) => ({
       action: bindActionCreators(action, dispatch),
     });
     ```

     ```javascript
     const mapDispatchToProps = { action };
     ```

     The third option is just a shorthand for the first one.

**[⬆ Back to Top](#table-of-contents)**

120. ### What is the use of the `ownProps` parameter in `mapStateToProps()` and `mapDispatchToProps()`?

     If the `ownProps` parameter is specified, React Redux will pass the props that were passed to the component into your _connect_ functions. So, if you use a connected component:

     ```jsx harmony
     import ConnectedComponent from "./containers/ConnectedComponent";

     <ConnectedComponent user={"john"} />;
     ```

     The `ownProps` inside your `mapStateToProps()` and `mapDispatchToProps()` functions will be an object:

     ```javascript
     {
       user: "john";
     }
     ```

     You can use this object to decide what to return from those functions.

**[⬆ Back to Top](#table-of-contents)**

121. ### How to structure Redux top level directories?

     Most of the applications has several top-level directories as below:

     1. **Components**: Used for _dumb_ components unaware of Redux.
     2. **Containers**: Used for _smart_ components connected to Redux.
     3. **Actions**: Used for all action creators, where file names correspond to part of the app.
     4. **Reducers**: Used for all reducers, where files name correspond to state key.
     5. **Store**: Used for store initialization.

     This structure works well for small and medium size apps.

**[⬆ Back to Top](#table-of-contents)**

122. ### What is redux-saga?

     `redux-saga` is a library that aims to make side effects (asynchronous things like data fetching and impure things like accessing the browser cache) in React/Redux applications easier and better.

     It is available in NPM:

     ```console
     $ npm install --save redux-saga
     ```

**[⬆ Back to Top](#table-of-contents)**

123. ### What is the mental model of redux-saga?

     _Saga_ is like a separate thread in your application, that's solely responsible for side effects. `redux-saga` is a redux _middleware_, which means this thread can be started, paused and cancelled from the main application with normal Redux actions, it has access to the full Redux application state and it can dispatch Redux actions as well.

**[⬆ Back to Top](#table-of-contents)**

124. ### What are the differences between `call()` and `put()` in redux-saga?

     Both `call()` and `put()` are effect creator functions. `call()` function is used to create effect description, which instructs middleware to call the promise. `put()` function creates an effect, which instructs middleware to dispatch an action to the store.

     Let's take example of how these effects work for fetching particular user data.

     ```javascript
     function* fetchUserSaga(action) {
       // `call` function accepts rest arguments, which will be passed to `api.fetchUser` function.
       // Instructing middleware to call promise, it resolved value will be assigned to `userData` variable
       const userData = yield call(api.fetchUser, action.userId);

       // Instructing middleware to dispatch corresponding action.
       yield put({
         type: "FETCH_USER_SUCCESS",
         userData,
       });
     }
     ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
     const getUserData = (state) => state.user.data;
     ```

     These selectors have two main benefits,

     1. The selector can compute derived data, allowing Redux to store the minimal possible state
     2. The selector is not recomputed unless one of its arguments changes

**[⬆ Back to Top](#table-of-contents)**

130. ### What is Redux Form?

     _Redux Form_ works with React and Redux to enable a form in React to use Redux to store all of its state. Redux Form can be used with raw HTML5 inputs, but it also works very well with common UI frameworks like Material UI, React Widgets and React Bootstrap.

**[⬆ Back to Top](#table-of-contents)**

131. ### What are the main features of Redux Form?

     Some of the main features of Redux Form are:

     1. Field values persistence via Redux store.
     2. Validation (sync/async) and submission.
     3. Formatting, parsing and normalization of field values.

**[⬆ Back to Top](#table-of-contents)**

132. ### How to add multiple middlewares to Redux?

     You can use `applyMiddleware()`.

     For example, you can add `redux-thunk` and `logger` passing them as arguments to `applyMiddleware()`:

     ```javascript
     import { createStore, applyMiddleware } from "redux";
     const createStoreWithMiddleware = applyMiddleware(
       ReduxThunk,
       logger
     )(createStore);
     ```

**[⬆ Back to Top](#table-of-contents)**

133. ### How to set initial state in Redux?

     You need to pass initial state as second argument to createStore:

     ```javascript
     const rootReducer = combineReducers({
       todos: todos,
       visibilityFilter: visibilityFilter,
     });

     const initialState = {
       todos: [{ id: 123, name: "example", completed: false }],
     };

     const store = createStore(rootReducer, initialState);
     ```

**[⬆ Back to Top](#table-of-contents)**

134. ### How Relay is different from Redux?

     Relay is similar to Redux in that they both use a single store. The main difference is that relay only manages state originated from the server, and all access to the state is used via _GraphQL_ queries (for reading data) and mutations (for changing data). Relay caches the data for you and optimizes data fetching for you, by fetching only changed data and nothing more.

135. ### What is an action in Redux?

     _Actions_ are plain JavaScript objects or payloads of information that send data from your application to your store. They are the only source of information for the store. Actions must have a type property that indicates the type of action being performed.

     For example, let's take an action which represents adding a new todo item:

     ```
     {
       type: ADD_TODO,
       text: 'Add todo item'
     }
     ```

**[⬆ Back to Top](#table-of-contents)**

## React Native

**[⬆ Back to Top](#table-of-contents)**

136. ### What is the difference between React Native and React?

     **React** is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications.

     **React Native** is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use React to build your components, and implements React under the hood.

**[⬆ Back to Top](#table-of-contents)**

137. ### How to test React Native apps?

     React Native can be tested only in mobile simulators like iOS and Android. You can run the app in your mobile using expo app (https://expo.io) Where it syncs using QR code, your mobile and computer should be in same wireless network.

**[⬆ Back to Top](#table-of-contents)**

138. ### How to do logging in React Native?

     You can use `console.log`, `console.warn`, etc. As of React Native v0.29 you can simply run the following to see logs in the console:

     ```
     $ react-native log-ios
     $ react-native log-android
     ```
/* Detailed source-code truncated for AI context efficiency. */
```console
        $ npm install --save font-awesome
        ```

     2. Import `font-awesome` in your `index.js` file:

        ```javascript
        import "font-awesome/css/font-awesome.min.css";
        ```

     3. Add Font Awesome classes in `className`:

        ```javascript
        function MyComponent {
          return 
        }
        ```

**[⬆ Back to Top](#table-of-contents)**

144. ### What is React Dev Tools?

     _React Developer Tools_ let you inspect the component hierarchy, including component props and state. It exists both as a browser extension (for Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native).

     The official extensions available for different browsers or environments.

     1. **Chrome extension**
     2. **Firefox extension**
     3. **Standalone app** (Safari, React Native, etc)

**[⬆ Back to Top](#table-of-contents)**

145. ### Why is DevTools not loading in Chrome for local files?

     If you opened a local HTML file in your browser (`file://...`) then you must first open _Chrome Extensions_ and check `Allow access to file URLs`.

**[⬆ Back to Top](#table-of-contents)**

146. ### How to use Polymer in React?

     You need to follow below steps to use Polymer in React,

     1. Create a Polymer element:

        ```jsx harmony
        <link
          rel="import"
          href="../../bower_components/polymer/polymer.html"
        />;
        Polymer({
          is: "calendar-element",
          ready: function () {
            this.textContent = "I am a calendar";
          },
        });
        ```

     2. Create the Polymer component HTML tag by importing it in a HTML document, e.g. import it in the `index.html` of your React application:

        ```html
        <link
          rel="import"
          href="./src/polymer-components/calendar-element.html"
        />
        ```

     3. Use that element in the JSX file:

        ```javascript
        export default function MyComponent {
          return <calendar-element />;
        }
        ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
     import React from "react";
     import styled from "styled-components";

     // Create a <Title> component that renders an <h1> which is centered, red and sized at 1.5em
     const Title = styled.h1`
       font-size: 1.5em;
       text-align: center;
       color: palevioletred;
     `;

     // Create a <Wrapper> component that renders a <section> with some padding and a papayawhip background
     const Wrapper = styled.section`
       padding: 4em;
       background: papayawhip;
     `;
     ```

     These two variables, `Title` and `Wrapper`, are now components that you can render just like any other react component.

     ```jsx harmony
     <Wrapper>
       <Title>{"Lets start first styled component!"}</Title>
     </Wrapper>
     ```

**[⬆ Back to Top](#table-of-contents)**

152. ### What is Relay?

     Relay is a JavaScript framework for providing a data layer and client-server communication to web applications using the React view layer.

**[⬆ Back to Top](#table-of-contents)**

## Miscellaneous

153. ### What are the main features of Reselect library?

     Let's see the main features of Reselect library,

     1. Selectors can compute derived data, allowing Redux to store the minimal possible state.
     2. Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
     3. Selectors are composable. They can be used as input to other selectors.

154. #### Give an example of Reselect usage?

     Let's take calculations and different amounts of a shipment order with the simplified usage of Reselect:

     ```javascript
     import { createSelector } from "reselect";

     const shopItemsSelector = (state) => state.shop.items;
     const taxPercentSelector = (state) => state.shop.taxPercent;

     const subtotalSelector = createSelector(shopItemsSelector, (items) =>
       items.reduce((acc, item) => acc + item.value, 0)
     );

     const taxSelector = createSelector(
       subtotalSelector,
       taxPercentSelector,
       (subtotal, taxPercent) => subtotal * (taxPercent / 100)
     );

     export const totalSelector = createSelector(
       subtotalSelector,
       taxSelector,
       (subtotal, tax) => ({ total: subtotal + tax })
     );

     let exampleState = {
       shop: {
         taxPercent: 8,
         items: [
           { name: "apple", value: 1.2 },
           { name: "orange", value: 0.95 },
         ],
       },
     };

     console.log(subtotalSelector(exampleState)); // 2.15
     console.log(taxSelector(exampleState)); // 0.172
     console.log(totalSelector(exampleState)); // { total: 2.322 }
     ```

**[⬆ Back to Top](#table-of-contents)**

155. ### Can Redux only be used with React?

     Redux can be used as a data store for any UI layer. The most common usage is with React and React Native, but there are bindings available for Angular, Angular 2, Vue, Mithril, and more. Redux simply provides a subscription mechanism which can be used by any other code.

**[⬆ Back to Top](#table-of-contents)**

156. ### Do you need to have a particular build tool to use Redux?

     Redux is originally written in ES6 and transpiled for production into ES5 with Webpack and Babel. You should be able to use it regardless of your JavaScript build process. Redux also offers a UMD build that can be used directly without any build process at all.

**[⬆ Back to Top](#table-of-contents)**

157. ### How Redux Form `initialValues` get updated from state?

     You need to add `enableReinitialize : true` setting.

     ```javascript
     const InitializeFromStateForm = reduxForm({
       form: "initializeFromState",
       enableReinitialize: true,
     })(UserEdit);
     ```

     If your `initialValues` prop gets updated, your form will update too.

**[⬆ Back to Top](#table-of-contents)**

158. ### How React PropTypes allow different types for one prop?

     You can use `oneOfType()` method of `PropTypes`.

     For example, the height property can be defined with either `string` or `number` type as below:

     ```javascript
     Component.propTypes = {
       size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     };
     ```

**[⬆ Back to Top](#table-of-contents)**

159. ### Can I import an SVG file as react component?

     You can import SVG directly as component instead of loading it as a file. This feature is available with `[email protected]` and higher.

     ```jsx harmony
     import { ReactComponent as Logo } from "./logo.svg";

     const App = () => (
       
         {/* Logo is an actual react component */}
         <Logo />
       
     );
     ```

     **Note**: Don't forget about the curly braces in the import.

**[⬆ Back to Top](#table-of-contents)**

160. ### What is render hijacking in react?

     The concept of render hijacking is the ability to control what a component will output from another component. It means that you decorate your component by wrapping it into a Higher-Order component. By wrapping, you can inject additional props or make other changes, which can cause changing logic of rendering. It does not actually enable hijacking, but by using HOC you make your component behave differently.

**[⬆ Back to Top](#table-of-contents)**

161. ### How to pass numbers to React component?

     We can pass `numbers` as `props` to React component using curly braces `{}` where as `strings` in double quotes `""` or single quotes `''`

     ```jsx
     import React from "react";

     const ChildComponent = ({ name, age }) => {
       return (
         <>
           My Name is {name} and Age is {age}
         </>
       );
     };

     const ParentComponent = () => {
       return (
         <>
           <ChildComponent name="Chetan" age={30} />
         </>
       );
     };

     export default ParentComponent;
     ```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
     import React from "react";
     import ReactDOM from "react-dom";
     import App from "./App";
     import registerServiceWorker from "./registerServiceWorker";

     ReactDOM.render(<App />, document.getElementById("root"));
     registerServiceWorker();
     ```

**[⬆ Back to Top](#table-of-contents)**

164. ### What is React memo function?

     Class components can be restricted from re-rendering when their input props are the same using **PureComponent or shouldComponentUpdate**. Now you can do the same with function components by wrapping them in **React.memo**.

     ```jsx
     const MyComponent = React.memo(function MyComponent(props) {
       /* only rerenders if props change */
     });
     ```

**[⬆ Back to Top](#table-of-contents)**

165. ### What is React lazy function?

     The `React.lazy` function lets you render a dynamic import as a regular component. It will automatically load the bundle containing the `OtherComponent` when the component gets rendered. This must return a Promise which resolves to a module with a default export containing a React component.

     ```jsx
     const OtherComponent = React.lazy(() => import("./OtherComponent"));

     function MyComponent() {
       return (
         
           <OtherComponent />
         
       );
     }
     ```

     **Note:**
     `React.lazy` and `Suspense` is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we still recommend React Loadable.

**[⬆ Back to Top](#table-of-contents)**

166. ### How to prevent unnecessary updates using setState?

     You can compare the current value of the state with an existing state value and decide whether to rerender the page or not. If the values are the same then you need to return **null** to stop re-rendering otherwise return the latest state value.

     For example, the user profile information is conditionally rendered as follows,

     ```jsx
     getUserProfile = (user) => {
       const latestAddress = user.address;
       this.setState((state) => {
         if (state.address === latestAddress) {
           return null;
         } else {
           return { title: latestAddress };
         }
       });
     };
     ```

**[⬆ Back to Top](#table-of-contents)**

167. ### How do you render Array, Strings and Numbers in React 16 Version?

     **Note:** This question references React 16. These features remain valid in current React versions (18/19).

     **Arrays**: Starting with React 16, you can return multiple sibling elements without a wrapping element by returning an array or using Fragments.

     **Array approach:**
     ```jsx
     const ReactJSDevs = () => {
       return [
         <li key="1">John</li>,
         <li key="2">Jackie</li>,
         <li key="3">Jordan</li>,
       ];
     };
     ```

     **Fragment approach (preferred):**
     ```jsx
     const ReactJSDevs = () => {
       return (
         <>
           <li>John</li>
           <li>Jackie</li>
           <li>Jordan</li>
         </>
       );
     };
     ```

     You can also merge this array of items in another array component.

     ```jsx
     const JSDevs = () => {
       return (
         
           <li>Brad</li>
           <li>Brodge</li>
           <ReactJSDevs />
           <li>Brandon</li>
         
       );
     };
     ```

     **Strings and Numbers:** You can also return string and number type from the render method.

     ```jsx
     render() {
      return 'Welcome to ReactJS questions';
     }
     // Number
     render() {
      return 2018;
     }
     ```

**[⬆ Back to Top](#table-of-contents)**

168. ### What are hooks?

     Hooks is a special JavaScript function that allows you use state and other React features without writing a class. This pattern has been introduced as a new feature in React 16.8 and helped to isolate the stateful logic from the components.

     Let's see an example of useState hook:

     ```jsx
     import { useState } from "react";

     function Example() {
       // Declare a new state variable, which we'll call "count"
       const [count, setCount] = useState(0);

       return (
         <>
           You clicked {count} times
            setCount(count + 1)}>Click me
         </>
       );
     }
     ```

     **Note:** Hooks can be used inside an existing function component without rewriting the component.

**[⬆ Back to Top](#table-of-contents)**

169. ### What rules need to be followed for hooks?

     You need to follow two rules in order to use hooks,

     1. **Call Hooks only at the top level of your react functions:** You should always use hooks at the top level of react function before any early returns. i.e, You shouldn’t call Hooks inside loops, conditions, or nested functions. This will ensure that Hooks are called in the same order each time a component renders and it preserves the state of Hooks between multiple re-renders due to `useState` and `useEffect` calls.

     Let's see the difference using an example,
     **Correct usage:**:
     ```jsx
     function UserProfile() {
      // Correct: Hooks called at the top level
      const [name, setName] = useState('John');
      const [country, setCountry] = useState('US');

      return (
        
          <h1>Name: {name}</h1>
          Country: {country}
        
      );
     }
     ```
     **Incorrect usage:**:
     ```jsx
     function UserProfile() {
      const [name, setName] = useState('John');

      if (name === 'John') {
        // Incorrect: useState is called inside a conditional
        const [country, setCountry] = useState('US'); 
      }

      return (
        
          <h1>Name: {name}</h1>
          Country: {country} {/* This will throw an error if the name condition isn't met */}
        
      );
     }
     ```
     The `useState` hook for the country field is being called conditionally within an `if` block. This can lead to inconsistent state behavior and may cause hooks to be called in a different order on each re-render.

     2. **Call Hooks from React Functions only:** You shouldn’t call Hooks from regular JavaScript functions or class components. Instead, you should call them from either function components or custom hooks.

     Let's find the difference of correct and incorrect usage with below examples,

     **Correct usage:**:
     ```jsx
     //Example1:
     function Counter() {
      // Correct: useState is used inside a functional component
      const [count, setCount] = useState(0);

      return Counter: {count};
     }
     //Example2:
     function useFetchData(url) {
      const [data, setData] = useState(null);

      useEffect(() => {
        fetch(url)
          .then((response) => response.json())
          .then((data) => setData(data));
      }, [url]);

      return data;
     }

     function UserProfile() {
      // Correct: Using a custom hook here
      const user = useFetchData('https://some-api.com/user');

      return (
        
          <h1>{user ? user.name : 'Loading profile...'}</h1>
        
      );
     }
     ```
     **Incorrect usage:**:
     ```jsx
      //Example1
      function normalFunction() {
        // Incorrect: Can't call hooks in normal functions
        const [count, setCount] = useState(0); 
      }

      //Example2
      function fetchData(url) {
        // Incorrect: Hooks can't be used in non-React functions
        const [data, setData] = useState(null);

        useEffect(() => {
          fetch(url)
            .then((response) => response.json())
            .then((data) => setData(data));
        }, [url]);

        return data;
      }
     ```
     In the above incorrect usage example, both `useState` and `useEffect` are used in non-React functions(`normalFunction` and `fetchData`), which is not allowed.

**[⬆ Back to Top](#table-of-contents)**

170.   ### How to ensure hooks followed the rules in your project?

        React team released an ESLint plugin called **eslint-plugin-react-hooks** that enforces Hook's two rules. It is part of Hooks API. You can add this plugin to your project using the below command,

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

        And apply the below config in your ESLint config file,

        ```javascript
        // Your ESLint configuration
        {
          "plugins": [
            // ...
            "react-hooks"
          ],
          "rules": {
            // ...
            "react-hooks/rules-of-hooks": "error"
          }
        }
        ```

        This plugin also provide another important rule through `react-hooks/exhaustive-deps`. It ensures that the dependencies of useEffect, useCallback, and useMemo hooks are correctly listed to avoid potential bugs.

        ```jsx
        useEffect(() => {
          // Forgetting `message` will result in incorrect behavior
          console.log(message);
        }, []); // Here `message` should be a dependency
        ```
        The recommended `eslint-config-react-app` preset already includes the hooks rules of this plugin.
        For example, the linter enforce proper naming convention for hooks. If you rename your custom hooks which as prefix "use" to something else then linter won't allow you to call built-in hooks such as useState, useEffect etc inside of your custom hook anymore.

        **Note:** This plugin is intended to use in Create React App by default.

**[⬆ Back to Top](#table-of-contents)**

171. ### What are the differences between Flux and Redux?

     The biggest conceptual difference is the data flow itself:

     ```
     Flux:

     View
      ↓
     Action
      ↓
     Dispatcher
      ↓
     Multiple Stores
      ↓
     View
     ```

     versus:

     ```
     Redux:

     View
      ↓
     Action
      ↓
     Middleware
      ↓
     Reducer
      ↓
     Single Store
      ↓
     View
     ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
     componentDidCatch(error, info);
     ```

**[⬆ Back to Top](#table-of-contents)**

174. ### In which scenarios do error boundaries not catch errors?

     Below are the cases in which error boundaries don't work,

     1. Inside Event handlers
     2. Asynchronous code using **setTimeout or requestAnimationFrame** callbacks
     3. During Server side rendering
     4. When errors thrown in the error boundary code itself

**[⬆ Back to Top](#table-of-contents)**

175. ### What is the behavior of uncaught errors in react 16?
     **Note:** This behavior was introduced in React 16 and continues in React 18/19.
     
     In React 16+, errors that are not caught by any error boundary will result in unmounting of the whole React component tree. The reason behind this decision is that it is worse to leave corrupted UI in place than to completely remove it. For example, it is worse for a payments app to display a wrong amount than to render nothing.

     **Best Practice:** Always wrap your application or critical sections in error boundaries to prevent complete unmounting and provide a better user experience.

     ```jsx
     <ErrorBoundary fallback={<ErrorPage />}>
       <App />
     </ErrorBoundary>
     ```

**[⬆ Back to Top](#table-of-contents)**

176. ### What is the proper placement for error boundaries?
     The granularity of error boundaries usage is up to the developer based on project needs. You can follow either of these approaches,
     1. You can wrap top-level route components to display a generic error message for the entire application.
     2. You can also wrap individual components in an error boundary to protect them from crashing the rest of the application.

**[⬆ Back to Top](#table-of-contents)**

177. ### What is the benefit of component stack trace from error boundary?

     Apart from error messages and javascript stack, React16 will display the component stack trace with file names and line numbers using error boundary concept.

     For example, BuggyCounter component displays the component stack trace as below,

     

**[⬆ Back to Top](#table-of-contents)**

178. ### What are default props?

     The _defaultProps_ can be defined as a property on the component to set the default values for the props. These default props are used when props not supplied(i.e., undefined props), but not for `null` or `0` as props. That means, If you provide null value then it remains null value. It's the same behavior with 0 as well.

     For example, let us create color default prop for the button component,

     ```javascript
     function MyButton {
       // ...
     }

     MyButton.defaultProps = {
       color: "red",
     };
     ```

     If `props.color` is not provided then it will set the default value to 'red'. i.e, Whenever you try to access the color prop it uses the default value

     ```javascript
     function MyButton() {
       return <MyButton />; // props.color will contain red value
     }
     ```

**[⬆ Back to Top](#table-of-contents)**

179. ### What is the purpose of displayName class property?

     The displayName string is used in debugging messages. Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component.

     For example, To ease debugging, choose a display name that communicates that it’s the result of a withSubscription HOC.

     ```javascript
     function withSubscription(WrappedComponent) {
       class WithSubscription extends React.Component {
         /* ... */
       }
       WithSubscription.displayName = `WithSubscription(${getDisplayName(
         WrappedComponent
       )})`;
       return WithSubscription;
     }
     function getDisplayName(WrappedComponent) {
       return (
         WrappedComponent.displayName || WrappedComponent.name || "Component"
       );
     }
     ```

**[⬆ Back to Top](#table-of-contents)**

180. ### What is the browser support for react applications?
     React supports all popular browsers, including Internet Explorer 9 and above, although some polyfills are required for older browsers such as IE 9 and IE 10. If you use **es5-shim and es5-sham** polyfill then it even support old browsers that doesn't support ES5 methods.

**[⬆ Back to Top](#table-of-contents)**

181. ### What is code-splitting?

     Code-Splitting is a feature supported by bundlers like Webpack and Browserify which can create multiple bundles that can be dynamically loaded at runtime. The react project supports code splitting via dynamic import() feature.

     For example, in the below code snippets, it will make moduleA.js and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button.

     **moduleA.js**

     ```javascript
     const moduleA = "Hello";

     export { moduleA };
     ```

     **App.js**

     ```javascript
     export default function App {
       function handleClick() {
         import("./moduleA")
           .then(({ moduleA }) => {
             // Use moduleA
           })
           .catch((err) => {
             // Handle failure
           });
       };

      return (
        
          Load
        
      );
     }
     ```

  <details><summary><b>See Class</b></summary>
    <p>

  ```javascript
    import React, { Component } from "react";

     class App extends Component {
       handleClick = () => {
         import("./moduleA")
           .then(({ moduleA }) => {
             // Use moduleA
           })
           .catch((err) => {
             // Handle failure
           });
       };

       render() {
         return (
           
             Load
           
         );
       }
     }

     export default App;

import "./App.css";
     import "@vaadin/vaadin-date-picker";
     export default function App() {
       return (
         
           <vaadin-date-picker label="When were you born?"></vaadin-date-picker>
         
       );
     }
     ```

**[⬆ Back to Top](#table-of-contents)**

197. ### What is dynamic import?

     You can achieve code-splitting in your app using dynamic import.

     Let's take an example of addition,

     1. **Normal Import**

     ```javascript
     import { add } from "./math";
     console.log(add(10, 20));
     ```

     2. **Dynamic Import**

     ```javascript
     import("./math").then((math) => {
       console.log(math.add(10, 20));
     });
     ```

**[⬆ Back to Top](#table-of-contents)**

198. ### What are loadable components?

     With the release of React 18, React.lazy and Suspense are now available for server-side rendering. However, prior to React 18, it was recommended to use Loadable Components for code-splitting in a server-side rendered app because React.lazy and Suspense were not available for server-side rendering. Loadable Components lets you render a dynamic import as a regular component. For example, you can use Loadable Components to load the OtherComponent in a separate bundle like this:

     ```javascript
     import loadable from "@loadable/component";

     const OtherComponent = loadable(() => import("./OtherComponent"));

     function MyComponent() {
       return (
         
           <OtherComponent />
         
       );
     }
     ```

     Now OtherComponent will be loaded in a separated bundle
     Loadable Components provides additional benefits beyond just code-splitting, such as automatic code reloading, error handling, and preloading. By using Loadable Components, you can ensure that your application loads quickly and efficiently, providing a better user experience for your users.

**[⬆ Back to Top](#table-of-contents)**

199. ### What is suspense component?

     React Suspense is a built-in feature that lets you delay rendering part of the UI until asynchronous work (such as loading a component or fetching data) is ready. While waiting, React shows a fallback UI (loading text, skeleton, spinner, etc.) defined by the nearest `<Suspense>` boundary.

     Common use cases:

     1. **Code splitting with `React.lazy()`**

        ```javascript
        import { Suspense, lazy } from "react";

        const OtherComponent = lazy(() => import("./OtherComponent"));

        function MyComponent() {
          return (
            <Suspense fallback={Loading component...}>
              <OtherComponent />
            </Suspense>
          );
        }
        ```

        The fallback is shown until `OtherComponent` is downloaded and rendered.

     2. **Data fetching that can suspend**

        ```jsx
        import { Suspense, use } from "react";

        function UserProfile() {
          const user = use(fetchUser()); // suspends until promise resolves
          return {user.name};
        }

        function App() {
          return (
            <Suspense fallback={Loading user...}>
              
            </Suspense>
          );
        }
        ```

     3. **Nested Suspense for progressive loading**

        Nested boundaries let important content render first while slower sections keep loading.

        ```jsx
        import { Suspense, lazy } from "react";

        const ProductDetails = lazy(() => import("./ProductDetails"));
        const ProductReviews = lazy(() => import("./ProductReviews"));

        function ProductPage() {
          return (
            <Suspense fallback={}>
              

              <Suspense fallback={<ReviewsSkeleton />}>
                
              </Suspense>
            </Suspense>
          );
        }
        ```

        Here, `ProductDetails` can appear first, and `ProductReviews` can continue loading with its own fallback.

     **Tip:** Keep Suspense boundaries close to slow UI regions so users see meaningful content sooner.
     

**[⬆ Back to Top](#table-of-contents)**

200. ### What is route based code splitting?

     One of the best place to do code splitting is with routes. The entire page is going to re-render at once so users are unlikely to interact with other elements in the page at the same time. Due to this, the user experience won't be disturbed.

     Let us take an example of route based website using libraries like React Router with React.lazy,

     ```javascript
     import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
     import React, { Suspense, lazy } from "react";

     const Home = lazy(() => import("./routes/Home"));
     const About = lazy(() => import("./routes/About"));

     const App = () => (
       <Router>
         <Suspense fallback={Loading...}>
           <Switch>
             <Route exact path="/" component={Home} />
             <Route path="/about" component={About} />
           </Switch>
         </Suspense>
       </Router>
     );
     ```

     In the above code, the code splitting will happen at each route level.

**[⬆ Back to Top](#table-of-contents)**

201. ### What is the purpose of default value in context?

     The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them.

     Below code snippet provides default theme value as Luna.

     ```javascript
     const MyContext = React.createContext(defaultValue);
     ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
        

        
        ```

     3. **Component Elements Of The Same Type:**
        When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element, and calls componentWillReceiveProps() and componentWillUpdate() on the underlying instance. After that, the render() method is called and the diff algorithm recurses on the previous result and the new result.
     4. **Recursing On Children:**
        when recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there’s a difference. For example, when adding an element at the end of the children, converting between these two trees works well.

        ```javascript
        
          <li>first</li>
          <li>second</li>
        

        
          <li>first</li>
          <li>second</li>
          <li>third</li>
        

        ```

     5. **Handling keys:**
        React supports a key attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. For example, adding a key can make the tree conversion efficient,

     ```javascript
     
       <li key="2015">Duke</li>
       <li key="2016">Villanova</li>
     

     
       <li key="2014">Connecticut</li>
       <li key="2015">Duke</li>
       <li key="2016">Villanova</li>
     
     ```

**[⬆ Back to Top](#table-of-contents)**

204. ### When do you need to use refs?

     There are few use cases to go for refs,

     1. Managing focus, text selection, or media playback.
     2. Triggering imperative animations.
     3. Integrating with third-party DOM libraries.

**[⬆ Back to Top](#table-of-contents)**

205. ### Must prop be named as render for render props?

     Even though the pattern named render props, you don’t have to use a prop named render to use this pattern. i.e, Any prop that is a function that a component uses to know what to render is technically a “render prop”. Lets take an example with the children prop for render props,

     ```javascript
     <Mouse
       children={(mouse) => (
         
           The mouse position is {mouse.x}, {mouse.y}
         
       )}
     />
     ```

     Actually children prop doesn’t need to be named in the list of “attributes” in JSX element. Instead, you can keep it directly inside element,

     ```javascript
     <Mouse>
       {(mouse) => (
         
           The mouse position is {mouse.x}, {mouse.y}
         
       )}
     </Mouse>
     ```

     While using this above technique(without any name), explicitly state that children should be a function in your propTypes.

     ```javascript
     Mouse.propTypes = {
       children: PropTypes.func.isRequired,
     };
     ```

**[⬆ Back to Top](#table-of-contents)**

206. ### What are the problems of using render props with pure components?
     If you create a function inside a render method, it negates the purpose of pure component. Because the shallow prop comparison will always return false for new props, and each render in this case will generate a new value for the render prop. You can solve this issue by defining the render function as instance method.

     ```javascript
     class Mouse extends React.PureComponent {
       render() {
         // BAD: a new arrow function reference is created on every render,
         // so PureComponent's shallow comparison always sees "new" props
         return <MouseTracker render={(mouse) => <Cat mouse={mouse} />} />;
       }
     }
     ```

     ```javascript
     class MouseWithCat extends React.PureComponent {
       // GOOD: defined once as an instance method/class property, so the
       // reference stays stable across renders
       renderTheCat = (mouse) => <Cat mouse={mouse} />;

       render() {
         return <MouseTracker render={this.renderTheCat} />;
       }
     }
     ```

**[⬆ Back to Top](#table-of-contents)**

207. ### What is windowing technique?
     Windowing is a technique that only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. If your application renders long lists of data then this technique is recommended. Both react-window and react-virtualized are popular windowing libraries which provides several reusable components for displaying lists, grids, and tabular data.

**[⬆ Back to Top](#table-of-contents)**

208. ### How do you print falsy values in JSX?

     The falsy values such as false, null, undefined, and true are valid children but they don't render anything. If you still want to display them then you need to convert it to string. Let's take an example on how to convert to a string,

     ```javascript
     My JavaScript variable is {String(myVariable)}.
     ```

**[⬆ Back to Top](#table-of-contents)**

209. ### What is the typical use case of portals?
     React Portals are primarily used to render UI components such as **modals, tooltips, dropdowns, hovercards, and notifications** outside of their parent component's DOM tree. This helps avoid common CSS issues caused by parent elements, such as:

     *   `**overflow: hidden**` on parent elements clipping or hiding child elements like modals or tooltips,
     *   **stacking context and** `**z-index**` **conflicts** created by parent containers that prevent child elements from appearing above other content.

     That means, you need to visually “break out” of its container. By rendering these UI elements into a separate DOM node (often directly under `<body>`), portals ensure they appear above all other content and are not restricted by the parent’s CSS or layout constraints, resulting in correct positioning and visibility regardless of the parent’s styling.

**[⬆ Back to Top](#table-of-contents)**

210.   ### How do you set default value for uncontrolled component?

     In React, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you might want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a **defaultValue** attribute instead of **value**.

     ```javascript
     render() {
       return (
         <form onSubmit={this.handleSubmit}>
           <label>
             User Name:
             
           </label>
           
         </form>
       );
     }
     ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
        npm install bootstrap
        ```
/* Detailed source-code truncated for AI context efficiency. */
```js
     useEffect(() => {
        // Side effect logic here

        return () => {
        // Cleanup logic (optional)
        };
        }, [dependencies]);
     ```
     This effect hook can be used to fetch data from an API and to set the data in the local state of the component with the useState hook’s update function.

     Here is an example of fetching a list of ReactJS articles from an API using fetch.

     ```javascript
     import React from "react";

     function App() {
       const [data, setData] = React.useState({ hits: [] });

       React.useEffect(() => {
         fetch("http://hn.algolia.com/api/v1/search?query=react")
           .then((response) => response.json())
           .then((data) => setData(data));
       }, []);

       return (
         
           {data.hits.map((item) => (
             <li key={item.objectID}>
               <a href={item.url}>{item.title}</a>
             </li>
           ))}
         
       );
     }

     export default App;
     ```

     A popular way to simplify this is by using the library axios.

     We provided an empty array as second argument to the useEffect hook to avoid activating it on component updates. This way, it only fetches on component mount.

**[⬆ Back to Top](#table-of-contents)**

218. ### Is Hooks cover all use cases for classes?
     Hooks doesn't cover all use cases of classes but there is a plan to add them soon. Currently there are no Hook equivalents to the uncommon **getSnapshotBeforeUpdate** and **componentDidCatch** lifecycles yet.

**[⬆ Back to Top](#table-of-contents)**

219. ### What is the stable release for hooks support?

     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

**[⬆ Back to Top](#table-of-contents)**

220. ### Why do we use array destructuring (square brackets notation) in `useState`?

     When we declare a state variable with `useState`, it returns a pair — an array with two items. The first item is the current value, and the second is a function that updates the value. Using [0] and [1] to access them is a bit confusing because they have a specific meaning. This is why we use array destructuring instead.

     For example, the array index access would look as follows:

     ```javascript
     var userStateVariable = useState("userProfile"); // Returns an array pair
     var user = userStateVariable[0]; // Access first item
     var setUser = userStateVariable[1]; // Access second item
     ```

     Whereas with array destructuring the variables can be accessed as follows:

     ```javascript
     const [user, setUser] = useState("userProfile");
     ```
/* Detailed source-code truncated for AI context efficiency. */
```bash
     npm install mobx --save
     npm install mobx-react --save
     ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
        // in es 5
        var someData = this.props.someData;
        var dispatch = this.props.dispatch;

        // in es6
        const { someData, dispatch } = this.props;
        ```

     2. **Spread operator:** Helps in passing props down into a component

        ```javascript
        // in es 5
        <SomeComponent someData={this.props.someData} dispatch={this.props.dispatch} />

        // in es6
        <SomeComponent {...this.props} />
        ```

     3. **Arrow functions:** Makes compact syntax
        ```javascript
        // es 5
        var users = usersList.map(function (user) {
          return <li>{user.name}</li>;
        });
        // es 6
        const users = usersList.map((user) => <li>{user.name}</li>);
        ```

**[⬆ Back to Top](#table-of-contents)**

230. ### Explain concurrent rendering with an example

     Concurrent rendering in React 18 lets React prepare UI updates in a non-blocking way. This means React can pause low-priority rendering work, handle urgent updates first (like typing or clicking), and then continue rendering.

     #### Example: Search input stays responsive while filtering a large list

     ```jsx
     import { useMemo, useState, useTransition } from "react";

     const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

     export default function SearchList() {
       const [query, setQuery] = useState("");
       const [filter, setFilter] = useState("");
       const [isPending, startTransition] = useTransition();

       function handleChange(e) {
         const value = e.target.value;
         setQuery(value); // urgent: keep input in sync

         // non-urgent: expensive list filtering can be interrupted
         startTransition(() => {
           setFilter(value);
         });
       }

       const filteredItems = useMemo(
         () => items.filter((item) => item.toLowerCase().includes(filter.toLowerCase())),
         [filter]
       );

       return (
         
           
           {isPending && Updating results...}
           
             {filteredItems.slice(0, 200).map((item) => (
               <li key={item}>{item}</li>
             ))}
           
         
       );
     }
     ```

     In this example, typing remains smooth because React prioritizes updating the input first, while list filtering is treated as interruptible background work.

**[⬆ Back to Top](#table-of-contents)**

231. ### What is the difference between async mode and concurrent mode?
     Both refers the same thing. Previously concurrent Mode being referred to as "Async Mode" by React team. The name has been changed to highlight React’s ability to perform work on different priority levels. So it avoids the confusion from other approaches to Async Rendering.

**[⬆ Back to Top](#table-of-contents)**

233. ### What is the purpose of eslint plugin for hooks?

     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.

**[⬆ Back to Top](#table-of-contents)**

234. ### What is the difference between Imperative and Declarative in React?

     Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue.

     The imperative way of doing this would be:

     ```javascript
     if (user.likes()) {
       if (hasBlue()) {
         removeBlue();
         addGrey();
       } else {
         removeGrey();
         addBlue();
       }
     }
     ```

     Basically, you have to check what is currently on the screen and handle all the changes necessary to redraw it with the current state, including undoing the changes from the previous state. You can imagine how complex this could be in a real-world scenario.

     In contrast, the declarative approach would be:

     ```javascript
     if (this.state.liked) {
       return ;
     } else {
       return <greyLike />;
     }
     ```

     Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a specific state, and is therefore much simpler to understand.

**[⬆ Back to Top](#table-of-contents)**

235. ### What are the benefits of using TypeScript with ReactJS?

     Below are some of the benefits of using TypeScript with ReactJS,

     1. It is possible to use latest JavaScript features
     2. Use of interfaces for complex type definitions
     3. IDEs such as VS Code was made for TypeScript
     4. Avoid bugs with the ease of readability and Validation

     **[⬆ Back to Top](#table-of-contents)**

236. ### How do you make sure that user remains authenticated on page refresh while using Context API State Management?

     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**

     ```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**

     ```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**

     ```js
     const authContext = useContext(AuthContext);

     const { loadUser } = authContext;

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

     **loadUser**

     ```js
     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);
       }
     };
     ```

**[⬆ Back to Top](#table-of-contents)**

237. ### What are the benefits of new JSX transform?

     There are three major benefits of new JSX transform,

     1. It is possible to use JSX without importing React packages
     2. The compiled output might improve the bundle size in a small amount
     3. The future improvements provides the flexibility to reduce the number of concepts to learn React.

**[⬆ Back to Top](#table-of-contents)**

238. ### How is the new JSX transform different from old transform??

     The new JSX transform doesn’t require React to be in scope. i.e, You don't need to import React package for simple scenarios.

     Let's take an example to look at the main differences between the old and the new transform,

     **Old Transform:**

     ```js
     import React from "react";

     function App() {
       return <h1>Good morning!!</h1>;
     }
     ```

     Now JSX transform convert the above code into regular JavaScript as below,

     ```js
     import React from "react";

     function App() {
       return React.createElement("h1", null, "Good morning!!");
     }
     ```

     **New Transform:**

     The new JSX transform doesn't require any React imports

     ```js
     function App() {
       return <h1>Good morning!!</h1>;
     }
     ```

     Under the hood JSX transform compiles to below code

     ```js
     import { jsx as _jsx } from "react/jsx-runtime";

     function App() {
       return _jsx("h1", { children: "Good morning!!" });
     }
     ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
     const Message = ({ text }) => {
       return {text};
     };
     ```

     We can create a wrapper component that will add a border to the message component:

     ```javascript
     const MessageWrapper = (props) => {
       return (
         
           <Message {...props} />
         
       );
     };
     ```

     Now we can use the MessageWrapper component instead of the Message component and the message will be displayed with a border:

     ```javascript
     <MessageWrapper text="Hello World" />
     ```

     Wrapper component can also accept its own props and pass them down to the wrapped component, for example, we can create a wrapper component that will add a title to the message component:

     ```javascript
     const MessageWrapperWithTitle = ({ title, ...props }) => {
       return (
         
           <h3>{title}</h3>
           <Message {...props} />
         
       );
     };
     ```

     Now we can use the MessageWrapperWithTitle component and pass title props:

     ```javascript
     <MessageWrapperWithTitle title="My Message" text="Hello World" />
     ```
/* Detailed source-code truncated for AI context efficiency. */
```js
     class App extends React.Component {
       render() {
         return <h1>This is a class component</h1>;
       }
     }
     ```

     **Note:** The **Pascal Case** is the recommended approach to provide naming to a component.

     Functional component has been improved over the years with some added features like Hooks. Here is a syntax for functional component.

     ```js
     function App() {
       return (
         
           <h1>Hello, I'm a function component</h1>
         
       );
     }
     ```

     ## 2. State:

     State contains information or data about a component which may change over time.

     In class component, you can update the state when a user interacts with it or server updates the data using the `setState()` method. The initial state is going to be assigned in the `Constructor()` method using the `this.state` object and it is possible to assign different data types such as string, boolean, numbers, etc.

     **A simple example showing how we use the setState() and constructor():**

     ```js
     class App extends Component {
       constructor() {
         super();
         this.state = {
           message: "This is a class component",
         };
       }
       updateMessage() {
         this.setState({
           message: "Updating the class component",
         });
       }
       render() {
         return (
           <>
             <h1>{this.state.message}</h1>
              {
                 this.updateMessage();
               }}>
               Click!!
             
           </>
         );
       }
     }

     ```

     You didn't use state in functional components because it was only supported in class components. But over the years hooks have been implemented in functional components which enables to use state too.

     The `useState()` hook can used to implement state in functional components. It returns an array with two items: the first item is current state and the next one is a function (setState) that updates the value of the current state.

     Let's see an example to demonstrate the state in functional components,

     ```js
     function App() {
       const [message, setMessage] = useState("This is a functional component");
       const updateMessage = () => {
         setMessage("Updating the functional component");
       };
       return (
         
           <h1>{message} </h1>
           Click me!!
         
       );
     }
     ```

     ## 3. Props:

     Props are referred to as "properties". The props are passed into React component just like arguments passed to a function. In other words, they are similar to HTML attributes.

     The props are accessible in child class component using `this.props` as shown in below example,

     ```js
     class Child extends React.Component {
       render() {
         return (
           <h1>
             {" "}
             This is a functional component and component name is {
               this.props.name
             }{" "}
           </h1>
         );
       }
     }

     class Parent extends React.Component {
       render() {
         return (
           
             <Child name="First child component" />
             <Child name="Second child component" />
           
         );
       }
     }
     ```

     Props in functional components are similar to that of the class components but the difference is the absence of 'this' keyword.

     ```js
     function Child(props) {
       return (
         <h1>
           This is a child component and the component name is{props.name}
         </h1>
       );
     }

     function Parent() {
       return (
         
           <Child name="First child component" />
           <Child name="Second child component" />
         
       );
     }
     ```

**[⬆ Back to Top](#table-of-contents)**

245. ### What is strict mode in React?

     `React.StrictMode` is a useful component for highlighting potential problems in an application. Just like `<Fragment>`, `<StrictMode>` does not render any extra DOM elements. It activates additional checks and warnings for its descendants. These checks apply for _development mode_ only.

     ```jsx harmony
     import { StrictMode } from "react";

     function App() {
       return (
         
           <Header />
           <StrictMode>
             
               <ComponentOne />
               <ComponentTwo />
             
           </StrictMode>
           <Header />
         
       );
     }
     ```

     In the example above, the _strict mode_ checks apply to `<ComponentOne>` and `<ComponentTwo>` components only. i.e., Part of the application only.

     **Note:** Frameworks such as NextJS has this flag enabled by default.

     **[⬆ Back to Top](#table-of-contents)**

246. ### What is the benefit of strict mode?

     The <StrictMode> will be helpful in the below cases,

     1. To find the bugs caused by impure rendering where the components will re-render twice.
     2. To find the bugs caused by missing cleanup of effects where the components will re-run effects one more extra time.
     3. Identifying components with **unsafe lifecycle methods**.
     4. Warning about **legacy string ref** API usage.
     5. Detecting unexpected **side effects**.
     6. Detecting **legacy context** API.
     7. Warning about deprecated **findDOMNode** usage

**[⬆ Back to Top](#table-of-contents)**

247. ### Why does strict mode render twice in React?

     StrictMode renders components twice in development mode(not production) in order to detect any problems with your code and warn you about those problems. This is used to detect accidental side effects in the render phase. If you used `create-react-app` development tool then it automatically enables StrictMode by default.

     ```js
     const root = createRoot(document.getElementById("root"));
     root.render(
       <StrictMode>
         <App />
       </StrictMode>
     );
     ```

     If you want to disable this behavior then you can simply remove `strict` mode.

     ```js
     const root = createRoot(document.getElementById("root"));
     root.render(<App />);
     ```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
      alert("parent")}>
        alert("child")}>
          e.stopPropagation()} />
          e.stopPropagation()} />
       
     
     ```

     The event propagation for the above code snippet happens in the following order:

     1. It travels downwards in the DOM tree by calling all `onClickCapture` event handlers.
     2. It executes `onClick` event handler on the target element.
     3. It travels upwards in the DOM tree by call all `onClick` event handlers above to it.

252. ### How does React updates screen in an application?

     React updates UI in three steps,

     1. **Triggering or initiating a render:** The component is going to triggered for render in two ways.

        1. **Initial render:** When the app starts, you can trigger the initial render by calling `creatRoot` with the target DOM node followed by invoking component's `render` method. For example, the following code snippet renders `App` component on root DOM node.

        ```jsx
        import { createRoot } from "react-dom/client";

        const root = createRoot(document.getElementById("root"));
        root.render(<App />);
        ```

        2. **Re-render when the state updated:** When you update the component state using the state setter function, the componen't state automatically queues for a render.

     2. **Rendering components:** After triggering a render, React will call your components to display them on the screen. React will call the root component for initial render and call the function component whose state update triggered the render. This is a recursive process for all nested components of the target component.

     3. **Commit changes to DOM:** After calling components, React will modify the DOM for initial render using `appendChild()` DOM API and apply minimal necessary DOM updates for re-renders based on differences between rerenders.

**[⬆ Back to Top](#table-of-contents)**

253.  ### How does React batch multiple state updates?

      React prevents component from re-rendering for each and every state update by grouping multiple state updates within an event handler. This strategy improves the application performance and this process known as **batching**. The older version of React only supported batching for browser events whereas React18 supported for asynchronous actions, timeouts and intervals along with native events. This improved version of batching is called **automatic batching**.

      Let's demonstrate this automatic batching feature with a below example.

      ```jsx
      import { useState } from "react";

      export default function BatchingState() {
        const [count, setCount] = useState(0);
        const [message, setMessage] = useState("batching");

        console.log("Application Rendered");

        const handleAsyncFetch = () => {
          fetch("https://jsonplaceholder.typicode.com/users/1").then(() => {
            // Automatic Batching re-render only once
            setCount(count + 1);
            setMessage("users fetched");
          });
        };

        return (
          <>
            <h1>{count}</h1>
            Click Me!
          </>
        );
      }
      ```

      The preceding code updated two state variables with in an event handler. However, React will perform automatic batching feature and the component will be re-rendered only once for better performance.

**[⬆ Back to Top](#table-of-contents)**

254.  ### Is it possible to prevent automatic batching?

      Yes, it is possible to prevent automatic batching default behavior. There might be cases where you need to re-render your component after each state update or updating one state depends on another state variable. Considering this situation, React introduced `flushSync` method from `react-dom` API for the usecases where you need to flush state updates to DOM immediately.

      The usage of `flushSync` method within an `onClick` event handler will be looking like as below,

      ```jsx
      import { flushSync } from "react-dom";

      const handleClick = () => {
        flushSync(() => {
          setClicked(!clicked); //Component will create a re-render here
        });

        setCount(count + 1); // Component will create a re-render again here
      };
      ```

      In the above click handler, React will update DOM at first using flushSync and second time updates DOM because of the counter setter function by avoiding automatic batching.

**[⬆ Back to Top](#table-of-contents)**

255.  ### What is React hydration?

      React hydration is used to add client-side JavaScript interactivity to pre-rendered static HTML generated by the server. It is used only for server-side rendering(SSR) to enhance the initial rendering time and make it SEO friendly application. This hydration acts as a bridge to reduce the gap between server side and client-side rendering.

      After the page loaded with generated static HTML, React will add application state and interactivity by attaching all event handlers for the respective elements. Let's demonstrate this with an example.

      Consider that React DOM API(using `renderToString`) generated HTML for `<App>` component which contains `<button>` element to increment the counter.

      ```jsx
      import {useState} from 'react';
      import { renderToString } from 'react-dom/server';

      export default function App() {
        const [count, setCount] = React.useState(0);

        return (
          <h1>Counter</h1>
           setCount(prevCount => prevCount + 1)}>
            {count} times
          
          );
      }

      const html = renderToString(<App />);
      ```

      The above code generates the below HTML with a header text and button component without any interactivity.

      ```html
      <h1>Counter</h1>
      
        0
        times
      
      ```

      At this stage `hydrateRoot` API can be used to perform hydration by attaching `onClick` event handler.

      ```jsx
      import { hydrateRoot } from "react-dom/client";
      import App from "./App.js";

      hydrateRoot(document.getElementById("root"), <App />);
      ```

      After this step, you are able to run React application on server-side and hydrating the javascript bundle on client-side for smooth user experience and SEO purposes.

**[⬆ Back to Top](#table-of-contents)**

256.  ### How do you update objects inside state?

      You cannot update the objects which exists in the state directly. Instead, you should create a fresh new object (or copy from the existing object) and update the latest state using the newly created object. Eventhough JavaScript objects are mutable, you need to treat objects inside state as read-only while updating the state.

      Let's see this comparison with an example. The issue with regular object mutation approach can be described by updating the user details fields of `Profile` component. The properties of `Profile` component such as firstName, lastName and age details mutated in an event handler as shown below.

      ```jsx
      import { useState } from "react";

      export default function Profile() {
        const [user, setUser] = useState({
          firstName: "John",
          lastName: "Abraham",
          age: 30,
        });

        function handleFirstNameChange(e) {
          user.firstName = e.target.value;
        }

        function handleLastNameChange(e) {
          user.lastName = e.target.value;
        }

        function handleAgeChange(e) {
          user.age = e.target.value;
        }

        return (
          <>
            <label>
              First name:
              
            </label>
            <label>
              Last name:
              
            </label>
            <label>
              Age:
              
            </label>
            
              Profile:
              {person.firstName} {person.lastName} ({person.age})
            
          </>
        );
      }
      ```

      Once you run the application with above user profile component, you can observe that user profile details won't be update upon entering the input fields.
      This issue can be fixed by creating a new copy of object which includes existing properties through spread syntax(...obj) and add changed values in a single event handler itself as shown below.

      ```jsx
      handleProfileChange(e) {
        setUser({
        ...user,
          [e.target.name]: e.target.value
        });
      }
      ```

      The above event handler is concise instead of maintaining separate event handler for each field. Now, UI displays the updated field values as expected without an issue.

**[⬆ Back to Top](#table-of-contents)**

257.  ### How do you update nested objects inside state?

      You cannot simply use spread syntax for all kinds of objects inside state. Because spread syntax is shallow and it copies properties for one level deep only. If the object has nested object structure, UI doesn't work as expected with regular JavaScript nested property mutation. Let's demonstrate this behavior with an example of User object which has address nested object inside of it.

      ```jsx
      const user = {
        name: "John",
        age: 32,
        address: {
          country: "Singapore",
          postalCode: 440004,
        },
      };
      ```

      If you try to update the country nested field in a regular javascript fashion(as shown below) then user profile screen won't be updated with latest value.

      ```js
      user.address.country = "Germany";
      ```

      This issue can be fixed by flattening all the fields into a top-level object or create a new object for each nested object and point it to it's parent object. In this example, first you need to create copy of address object and update it with the latest value. Later, the address object should be linked to parent user object something like below.

      ```js
      setUser({
        ...user,
        address: {
          ...user.address,
          country: "Germany",
        },
      });
      ```

      This approach is bit verbose and not easy for deep hierarchical state updates. But this workaround can be used for few levels of nested objects without much hassle.

**[⬆ Back to Top](#table-of-contents)**

258.  ### How do you update arrays inside state?

      Eventhough arrays in JavaScript are mutable in nature, you need to treat them as immutable while storing them in a state. That means, similar to objects, the arrays cannot be updated directly inside state. Instead, you need to create a copy of the existing array and then set the state to use newly copied array.

      To ensure that arrays are not mutated, the mutation operations like direct direct assignment(arr[1]='one'), push, pop, shift, unshift, splice etc methods should be avoided on original array. Instead, you can create a copy of existing array with help of array operations such as filter, map, slice, spread syntax etc.

      For example, the below push operation doesn't add the new todo to the total todo's list in an event handler.

      ```jsx
      onClick = {
        todos.push({
          id: id+1,
          name: name
        })
      }
      ```

      This issue is fixed by replacing push operation with spread syntax where it will create a new array and the UI updated with new todo.

      ```jsx
      onClick = {
        [
          ...todos,
          { id: id+1, name: name }
        ]
      }
      ```

**[⬆ Back to Top](#table-of-contents)**

259.  ### How do you use immer library for state updates?

      Immer library enforces the immutability of state based on **copy-on-write** mechanism. It uses JavaScript proxy to keep track of updates to immutable states. Immer has 3 main states as below,

      1. **Current state:** It refers to actual state
      2. **Draft state:** All new changes will be applied to this state. In this state, draft is just a proxy of the current state.
      3. **Next state:** It is formed after all mutations applied to the draft state

      Immer can be used by following below instructions,

      1. Install the dependency using `npm install use-immer` command
      2. Replace `useState` hook with `useImmer` hook by importing at the top
      3. The setter function of `useImmer` hook can be used to update the state.

      For example, the mutation syntax of immer library simplifies the nested address object of user state as follows,

      ```jsx
      import { useImmer } from "use-immer";
      const [user, setUser] = useImmer({
        name: "John",
        age: 32,
        address: {
          country: "Singapore",
          postalCode: 440004,
        },
      });

      //Update user details upon any event
      setUser((draft) => {
        draft.address.country = "Germany";
      });
      ```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
        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.
    
        ```jsx
        function App() {
            return ( 
                
                   <MyComponent />
                
            ); 
        }
        ```
    
        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:
    
        ```jsx
        import { useContext } from 'react'; 
        function MyComponent() {
            const theme = useContext(ThemeContext); // theme = "dark"
            return Current Theme: {theme}; 
        }
        ```
/* Detailed source-code truncated for AI context efficiency. */

pages/
 ├── index.js          // Home page (/)
 ├── about.js          // About page (/about)
 ├── _app.js           // Custom App component
 ├── _document.js      // Custom Document
 └── posts/
     └── [id].js       // Dynamic route (/posts/:id)
 ```

 **Example of App Router structure:**
 ```
 app/
 ├── page.js           // Home page (/)
 ├── layout.js         // Root layout
 ├── loading.js        // Loading UI
 ├── error.js          // Error UI
 ├── about/
 │   └── page.js       // About page (/about)
 └── posts/
     └── [id]/
         └── page.js   // Dynamic route (/posts/:id)
 ```

 **Note:** The App Router is recommended for new Next.js applications as it provides better performance, simpler data fetching patterns, and improved developer experience with React Server Components.

let hookIndex = 0;
        const hooks = [];
        
        function useState(initialValue) {
            const currentIndex = hookIndex;
        
            if (!hooks[currentIndex]) {
                // First render: initialize state
                hooks[currentIndex] = {
                    state: initialValue,
                    queue: [],
                };
            }
        
            const hook = hooks[currentIndex];
        
            // Process queued updates
            hook.queue.forEach(update => {
                hook.state = update(hook.state);
            });
            hook.queue = [];
        
            // Define updater function
            function setState(action) {
                // action can be new state or function(state) => new state
                hook.queue.push(typeof action === 'function' ? action : () => action);
                scheduleRender(); // triggers React re-render
            }
        
            hookIndex++;
            return [hook.state, setState];
        }
        ```
      
**[⬆ Back to Top](#table-of-contents)**

279. ### What is `useReducer`? Why do you use useReducer?
     The `useReducer` hook is a React hook used to manage **complex state logic** inside **functional components**. It is conceptually similar to **Redux**. i.e, Instead of directly updating state like with `useState`, you **dispatch an action** to a **reducer function**, and the reducer returns the new state.

     The `useReducer` hook takes three arguments:

        ```js
        const [state, dispatch] = useReducer(reducer, initialState, initFunction);
        ```

        *   `**reducer**`: A function `(state, action) => newState` that handles how state should change based on the action.
        *   `**initialState**`: The starting state.
        *   `**dispatch**`: A function you call to trigger an update by passing an action.

     The `useReducer` hook is used when:

     *   The **state is complex**, such as nested structures or multiple related values.
     *   State updates depend on the **previous state** and **logic**.
     *   You want to **separate state update logic** from UI code to make it cleaner and testable.
     *   You’re managing features like:
         *   Forms
         *   Wizards / Multi-step flows
         *   Undo/Redo functionality
         *   Shopping cart logic
         *   Toggle & conditional UI logic
         
**[⬆ Back to Top](#table-of-contents)**

280. ### How does `useReducer` works? Explain with an example
     The `useReducer` hooks works similarly to Redux, where:

        *   You define a **reducer function** to handle state transitions.
        *   You dispatch actions to update the state.
     
     **Counter Example with Increment, Decrement, and Reset:**
     1. Reducer function:

        Define a counter reducer function that takes the current state and an action object with a type, and returns a new state based on that type.
     
         ```js
         function counterReducer(state, action) {
            switch (action.type) {
              case 'increment':
                return { count: state.count + 1 };
              case 'decrement':
                return { count: state.count - 1 };
              case 'reset':
                return { count: 0 };
              default:
                return state;
            }
          }
         ```
     2. Using `useReducer`:
      Invoke `useReducer` with above reducer function along with initial state. Thereafter, you can attach dispatch actions for respective button handlers.
      ```js
      import React, { useReducer } from 'react';

        function Counter() {
          const initialState = { count: 0 };
          const [state, dispatch] = useReducer(counterReducer, initialState);

          return (
            
              <h2>Count: {state.count}</h2>
               dispatch({ type: 'increment' })}>Increment
               dispatch({ type: 'decrement' })}>Decrement
               dispatch({ type: 'reset' })}>Reset
            
          );
        }

      export default Counter;
      ```
      Once the new state has been returned, React re-renders the component with the updated `state.count`.

**[⬆ Back to Top](#table-of-contents)**

281. ### Can you combine **useReducer** with **useContext**?

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

      ```js
      const AppContext = React.createContext();

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

**[⬆ Back to Top](#table-of-contents)**

282. ### Can you dispatch multiple actions in a row with useReducer?
     Yes, you can dispatch multiple actions in a row using `useReducer` but not directly in one call. You'd have to call dispatch multiple times or create a composite action in your reducer that performs multiple updates based on the action type.
     
     **Example: Dispatching Multiple Actions**
     You can define a custom function with dispatching actions one by one.
     ```js
     function handleMultipleActions(dispatch) {
       dispatch({ type: 'increment' });
       dispatch({ type: 'increment' });
       dispatch({ type: 'reset' });
     }
     ```
     After that, you need to invoke it through event handler
     ```js
      handleMultipleActions(dispatch)}>
       Run Multiple Actions
     
     ```
     **Note:** You can also define a custom action type If you want multiple state changes to be handled in one reducer call.
     ```js
     case 'increment_twice':
       return { count: state.count + 2 };
     ```
     Then dispatch
     ```js
     dispatch({ type: 'increment_twice' });
     ```

**[⬆ Back to Top](#table-of-contents)**

283. ### Is dispatch from useReducer asynchronous and does it update state immediately?

     The `dispatch` function returned by `useReducer` is **not asynchronous** — it is a **synchronous** function call. When you call `dispatch(action)`, React **synchronously** invokes your reducer with the current state and the action, computes the new state, and **schedules a re-render**. However, the **state variable does not update immediately** within the same render cycle. The updated state is only available in the **next render**.

     This behavior is similar to `useState`'s `setState` — React **batches** state updates for performance optimization, meaning the component does not re-render immediately after each `dispatch` call. Instead, React processes all dispatched actions and re-renders once with the final state.

     #### Key Points

     1. **`dispatch` is synchronous:** The reducer runs immediately when `dispatch` is called.
     2. **State update is not immediate in the current render:** The state variable still holds the old value until the next render.
     3. **React batches updates:** Multiple `dispatch` calls within the same event handler result in a single re-render.
     4. **Reducer is a pure function:** It computes the new state without side effects.

     #### Example demonstrating that state does not update immediately

     ```jsx
     import React, { useReducer } from 'react';

     function reducer(state, action) {
       switch (action.type) {
         case 'increment':
           return { count: state.count + 1 };
         default:
           return state;
       }
     }

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

       const handleClick = () => {
         dispatch({ type: 'increment' });
         console.log(state.count); // Still logs the OLD value (e.g., 0), not 1
         dispatch({ type: 'increment' });
         console.log(state.count); // Still logs the OLD value (e.g., 0), not 2
       };

       // After re-render, state.count will be 2 (both dispatches are processed)
       return (
         
           Count: {state.count}
           Increment Twice
         
       );
     }
     ```

     In the above example, even though `dispatch` is called twice, `state.count` still reflects the **previous** value inside the event handler. React batches both dispatches and re-renders the component **once** with `count: 2`.

     #### How to read updated state after dispatch

     If you need the updated value right after dispatching, you have several options:

     1. **Use `useEffect` to react to state changes:**
        ```jsx
        useEffect(() => {
          console.log('Updated count:', state.count);
        }, [state.count]);
        ```

     2. **Compute the next state manually:**
        ```jsx
        const handleClick = () => {
          const nextState = reducer(state, { type: 'increment' });
          console.log('Next state will be:', nextState.count);
          dispatch({ type: 'increment' });
        };
        ```

     3. **Use `useRef` to track the latest state:**
        ```jsx
        const stateRef = useRef(state);
        useEffect(() => {
          stateRef.current = state;
        }, [state]);
        ```

     **Note:** This behavior is by design in React. The `dispatch` function itself has a **stable identity** (it doesn't change between re-renders), which makes it safe to omit from `useEffect` dependency arrays.

**[⬆ Back to Top](#table-of-contents)**

284. ### How does useContext works? Explain with an example
     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.
        ```js
        // 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      
        ```js
        // 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.

        ```js
         // HomePage.js
         import React from 'react';
         import { useAuth } from './AuthContext';
    
         function HomePage() {
           const { user, login } = useAuth();
    
           return (
             
               <h1>Home</h1>
               {user ? (
                 Welcome back, {user.name}!
               ) : (
                  login('Alice')}>Login
               )}
             
           );
         }
    
         export default HomePage;
        ```
     
     **4. Dashboard with logout:**
      Read or access user and logout details from `useAuth` custom hook and use it inside dashboard page.

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

**[⬆ Back to Top](#table-of-contents)**

285. ### Can You Use Multiple Contexts in One Component?
     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**
     ```js
     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 (
          
            <h1>Welcome, {user.name}</h1>
            Current theme: {theme}
          
        );
      }

      // Step 3: Provide both contexts
      function App() {
        return (
          
            
              <Dashboard />
            
          
        );
      }

      export default App;
     ```

**[⬆ Back to Top](#table-of-contents)**

286. ###  What's a common pitfall when using useContext with objects?
     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:**
     ```js
        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:

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

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

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

     However, this only helps if the object structure and dependencies are well controlled.
    
  **[⬆ Back to Top](#table-of-contents)**

287. ### What would the context value be for no matching provider?
    
     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.
    
     ```js
     const ThemeContext = React.createContext('light'); // 'light' is the default value
    
     function ThemedComponent() {
       const theme = useContext(ThemeContext);
       return Current theme: {theme};
     }
    
     // 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:
    
     ```jsx
     const AuthContext = React.createContext(); // No default
    
     function Profile() {
       const auth = useContext(AuthContext);
       // auth will be undefined if there's no AuthContext.Provider
     }
     ```

**[⬆ Back to Top](#table-of-contents)**

288. ### How do reactive dependencies in the useEffect dependency array affect its execution behavior?
     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:** `**[]**`

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

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

     2. **With Specific Dependencies:** `**[count, user]**`

     ```css
     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.

     3. **No Dependency Array (Omitted)**

          ```css
          useEffect(() => {
            // runs after **every** render
          });
          ```
/* Detailed source-code truncated for AI context efficiency. */
```js
      useEffect(async () => {
        await fetchData(); // ❌ useEffect shouldn't be async
      }, []);
      ```
      **Correct:**
      ```jsx
      useEffect(() => {
        const fetchData = async () => {
          const res = await fetch('/api');
          const data = await res.json();
          setData(data);
        };

        fetchData();
      }, []);
      ```
**[⬆ Back to Top](#table-of-contents)**

290. ### Can you have multiple useEffect hooks in a single component?
      Yes, multiple useEffect hooks are allowed and recommended when you want to separate concerns.

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

      useEffect(() => {
        // Handles event listeners
      }, []);
      ```
      Each effect runs independently and helps make code modular and easier to debug.

**[⬆ Back to Top](#table-of-contents)**

291. ### How to prevent infinite loops with useEffect?
        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:**
        ```js
        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.
        ```js
        useEffect(() => {
          if (count < 5) {
            setCount(count + 1);
          }
        }, [count]);
        ```
**[⬆ Back to Top](#table-of-contents)**

292. ### What are the usecases of useLayoutEffect?
      You need to use `useLayoutEffect` when your effect **must run before the browser paints**, such as:

      *   **Reading layout measurements** (e.g., element size, scroll position)
      *   **Synchronously applying DOM styles** to prevent visual flicker
      *   **Animating layout or transitions**
      *   **Integrating with third-party libraries** that require DOM manipulation

      If there's no visual or layout dependency, prefer `useEffect` — it's more performance-friendly.

      ```js
      useLayoutEffect(() => {
        const width = divRef.current.offsetWidth;
        if (width < 400) {
          divRef.current.style.background = 'blue'; // prevents flicker
        }
      }, []);
      ```

**[⬆ Back to Top](#table-of-contents)**

293. ### How does useLayoutEffect work during server-side rendering (SSR)?

     The `useLayoutEffect` hook does **not run on the server**, because there is no DOM. React issues a warning in server environments like Next.js if `useLayoutEffect` is used directly.

     This can be mitigated using a conditional polyfill:

      ```jsx
      const useIsomorphicLayoutEffect =
        typeof window !== 'undefined' ? useLayoutEffect : useEffect;
      ```

      i.e, Use `useIsomorphicLayoutEffect` in components that render both on client and server.     

**[⬆ Back to Top](#table-of-contents)** 

294. ### What happens if you use useLayoutEffect for non-layout logic?
      Using `useLayoutEffect` for logic **unrelated to layout or visual DOM changes** (such as logging, data fetching, or analytics) is **not recommended**. It can lead to **performance issues** or even unexpected behavior.

      **Example: Anti-pattern**
      ```js
      useLayoutEffect(() => {
        console.log("Tracking analytics");
        fetch('/log-page-view');
      }, []);
      ```
      The above usage delays the paint of the UI just to send a network request, which could (and should) be done after paint using useEffect.

**[⬆ Back to Top](#table-of-contents)** 

295. ### How does useLayoutEffect cause layout thrashing?
      The `useLayoutEffect` can **cause layout thrashing** when you **repeatedly read and write to the DOM** in ways that force the browser to recalculate layout multiple times per frame. This is because `useLayoutEffect` runs _before the browser paints_, these reflows happen _synchronously_, blocking rendering and degrading performance.

      **Example:**
      ```js
      function ThrashingComponent() {
        const ref = useRef();

        useLayoutEffect(() => {
          const height = ref.current.offsetHeight; //Read
          ref.current.style.height = height + 20 + 'px'; //Write
          const newHeight = ref.current.offsetHeight; //Read again — forces reflow
        }, []);

        return Hello;
      }
      ```
      In the above code, each read/write cycle triggers synchronous reflows, blocking the main thread and delays UI rendering.

      This issue can be avoided by batching your DOM reads and writes and prevent unnecessary reads after writes.

**[⬆ Back to Top](#table-of-contents)** 

296. ### How Do You Use useRef to Access a DOM Element in React? Give an example.
        The `useRef` hook is commonly used in React to directly reference and interact with DOM elements — like focusing an input, scrolling to a section, or controlling media elements.
        
        When you assign a ref to a DOM element using useRef, React gives you access to the underlying DOM node via the .current property of the ref object.
        
        **Example: Focus an input**

        ```js
        import React, { useRef } from 'react';
        
        function FocusInput() {
          const inputRef = useRef(null); // create the ref
        
          const handleFocus = () => {
            inputRef.current.focus(); // access DOM element and focus it
          };
        
          return (
            
              
              Focus the input
            
          );
        }
        ```
       **Note:** The DOM reference is only available **after the component has mounted** — typically accessed in `useEffect` or event handlers.

**[⬆ Back to Top](#table-of-contents)**

297. ### Can you use useRef to persist values across renders??
        Yes, you can use `useRef` to persist values across renders in React. Unlike `useState`, changing `.current` does not cause re-renders, but the value is preserved across renders.
        
        **Example:**
        ```js
        function Timer() {
          const renderCount = useRef(0);
          useEffect(() => {
            renderCount.current++;
            console.log("Render count:", renderCount.current);
          });
        
          return Check console for render count.;
        }
        ```
**[⬆ Back to Top](#table-of-contents)**

298. ###  Can useRef be used to store previous values?
        Yes, `useRef` is a common pattern when you want to compare current and previous props or state without causing re-renders.
        
        **Example: Storing previous state value**
        ```js
        import { useEffect, useRef, useState } from 'react';
        
        function PreviousValueExample() {
          const [count, setCount] = useState(0);
          const prevCountRef = useRef();
        
          useEffect(() => {
            prevCountRef.current = count;
          }, [count]);
        
          const prevCount = prevCountRef.current;
        
          return (
            
              Current: {count}
              Previous: {prevCount}
               setCount(c => c + 1)}>Increment
            
          );
        }
        ```
     
**[⬆ Back to Top](#table-of-contents)**

299. ### Is it possible to access a ref in the render method?
        Yes, you can access a ref in the render method, but what you get from it depends on how you're using the ref and when in the component lifecycle you're rendering.
        
        For example, when using ref to access a DOM node (e.g., divRef.current), it's not immediately available on the first render.
        ```js
        const divRef = useRef(null);
        
        console.log(divRef.current); // ❌ null on initial render
        return Hello;
        ```
     
**[⬆ Back to Top](#table-of-contents)**

300. ### What are the common usecases of useRef hook?
      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).

**[⬆ Back to Top](#table-of-contents)**

301. ### What is useImperativeHandle Hook? Give an example.
      `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**
      ```js
      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 (
           
            <h2>Dialog</h2>
             setFormData(e.target.value)}
            />
            
             setIsOpen(false)}>Close
          
        );
      });

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

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

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

      export default Parent;
      ```
/* Detailed source-code truncated for AI context efficiency. */
```css
        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.

**[⬆ Back to Top](#table-of-contents)**

307. ### What are Custom React Hooks, and How Can You Develop One?

      **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.

      ```jsx
      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**
      ```jsx
      function AuthorList() {
        const { data, loading, error } = useFetchData('https://api.example.com/authors');

        if (loading) return Loading authors...;
        if (error) return Error: {error};

        return (
          
            {data.map((author) => (
              <li key={author.id}>{author.name}</li>
            ))}
          
        );
      }
      ```
/* Detailed source-code truncated for AI context efficiency. */
```js
     const id = useId();
     ```

     #### Example: Accessible Form Input
     ```jsx
     import { useId } from 'react';

     function EmailField() {
       const id = useId();
       
       return (
         
           <label htmlFor={id}>Email:</label>
           
         
       );
     }
     ```

     #### 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`.

**[⬆ Back to Top](#table-of-contents)**

311. ### What is the useDeferredValue hook?

     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
     ```js
     const deferredValue = useDeferredValue(value);
     ```

     #### Example: Search with Deferred Results
     ```jsx
     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 (
         
           {results.map(item => <li key={item.id}>{item.name}</li>)}
         
       );
     }

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

       return (
         
            setQuery(e.target.value)}
             placeholder="Search..."
           />
           
             <SearchResults query={deferredQuery} />
           
         
       );
     }
     ```

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

**[⬆ Back to Top](#table-of-contents)**

312. ### What is the useTransition hook and how does it differ from useDeferredValue?

     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
     ```js
     const [isPending, startTransition] = useTransition();
     ```

     #### Example: Tab Switching
     ```jsx
     import { useState, useTransition } from 'react';

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

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

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

     #### 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 |

**[⬆ Back to Top](#table-of-contents)**

313. ### What is the useSyncExternalStore hook?

     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
     ```js
     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
     ```jsx
     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).

**[⬆ Back to Top](#table-of-contents)**

314. ### What is the useInsertionEffect hook?

     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
     ```js
     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
     ```jsx
     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 Click me;
     }
     ```

     **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.

**[⬆ Back to Top](#table-of-contents)**

315. ### How do you share state logic between components using custom hooks?

     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
     ```jsx
     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 (
          setTheme(theme === 'light' ? 'dark' : 'light')}>
           Current: {theme}
         
       );
     }

     function FontSizeSelector() {
       const [fontSize, setFontSize] = useLocalStorage('fontSize', 16);
       return (
          setFontSize(Number(e.target.value))} 
         />
       );
     }
     ```

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

**[⬆ Back to Top](#table-of-contents)**

316. ### What is the useDebugValue hook?

     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
     ```js
     useDebugValue(value);
     useDebugValue(value, formatFn); // With optional formatter
     ```

     #### Example: Custom Hook with Debug Value
     ```jsx
     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)
     ```jsx
     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.

**[⬆ Back to Top](#table-of-contents)**

317. ### How do you handle cleanup in useEffect?

     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
     ```js
     useEffect(() => {
       // Setup code
       
       return () => {
         // Cleanup code
       };
     }, [dependencies]);
     ```

     #### Common Cleanup Scenarios

     **1. Event Listeners**
     ```jsx
     useEffect(() => {
       const handleResize = () => setWidth(window.innerWidth);
       window.addEventListener('resize', handleResize);
       
       return () => window.removeEventListener('resize', handleResize);
     }, []);
     ```

     **2. Timers and Intervals**
     ```jsx
     useEffect(() => {
       const intervalId = setInterval(() => {
         setCount(c => c + 1);
       }, 1000);
       
       return () => clearInterval(intervalId);
     }, []);
     ```

     **3. Subscriptions**
     ```jsx
     useEffect(() => {
       const subscription = dataSource.subscribe(handleChange);
       
       return () => subscription.unsubscribe();
     }, [dataSource]);
     ```

     **4. Abort Fetch Requests**
     ```jsx
     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

**[⬆ Back to Top](#table-of-contents)**

317. ### What are the differences between useEffect and useEvent (experimental)?

     `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
     ```jsx
     // 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)
     ```jsx
     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.

**[⬆ Back to Top](#table-of-contents)**

319. ### What are the best practices for using React Hooks?

     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**
     ```bash
     npm install eslint-plugin-react-hooks --save-dev
     ```
     ```json
     {
       "plugins": ["react-hooks"],
       "rules": {
         "react-hooks/rules-of-hooks": "error",
         "react-hooks/exhaustive-deps": "warn"
       }
     }
     ```

     #### 3. **Keep Hooks Focused and Simple**
     ```jsx
     // ❌ 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**
     ```jsx
     // ❌ Bad
     function useData() { }

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

     #### 5. **Properly Manage Dependencies**
     ```jsx
     // ❌ Bad: Missing dependency
     useEffect(() => {
       fetchUser(userId);
     }, []); // userId is missing

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

     #### 6. **Avoid Inline Object/Function Dependencies**
     ```jsx
     // ❌ 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.

**[⬆ Back to Top](#table-of-contents)**

## Modern React Features (React 18/19)

320. ### What are the key features introduced in React 18?

     React 18, released in March 2022, introduced several groundbreaking features focused on performance and user experience:

     #### 1. **Automatic Batching**
     Batch multiple state updates together (even in async code) to reduce re-renders.
     ```jsx
     // Before React 18: Only batched in event handlers
     // After React 18: Batched everywhere
     setTimeout(() => {
       setCount(c => c + 1);
       setFlag(f => !f);
       // Only 1 re-render in React 18!
     }, 1000);
     ```

     #### 2. **Concurrent Features**
     - **useTransition**: Mark updates as non-urgent
     - **useDeferredValue**: Defer expensive re-renders
     - **Suspense on Server**: SSR with Suspense support

     #### 3. **New createRoot API**
     ```jsx
     // Old way (React 17)
     ReactDOM.render(<App />, document.getElementById('root'));

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

     #### 4. **Streaming SSR with Suspense**
     Stream HTML from server and hydrate components as they arrive.

     #### 5. **New Hooks**
     - `useId`: Generate unique IDs for accessibility
     - `useSyncExternalStore`: Subscribe to external stores
     - `useInsertionEffect`: For CSS-in-JS libraries

     #### 6. **Strict Mode Improvements**
     Double-invokes effects in development to catch bugs.

**[⬆ Back to Top](#table-of-contents)**

321. ### What are the key features introduced in React 19?

     React 19 (released 2024) brings major improvements for full-stack React applications:

     #### 1. **React Compiler (formerly React Forget)**
     Automatic memoization - no more manual `useMemo`, `useCallback`, or `React.memo` needed!
     ```jsx
     // Before: Manual optimization
     const memoizedValue = useMemo(() => expensiveCalc(a, b), [a, b]);
     
     // React 19: Compiler does it automatically
     const value = expensiveCalc(a, b); // Automatically optimized!
     ```

     #### 2. **Server Actions**
     Call server functions directly from components:
     ```jsx
     async function createPost(formData) {
       'use server'
       const post = await db.posts.create({
         title: formData.get('title')
       });
       revalidatePath('/posts');
       return post;
     }

     function NewPost() {
       return (
         <form action={createPost}>
           
           Create
         </form>
       );
     }
     ```

     #### 3. **Actions & Form Actions**
     Automatic handling of pending states, errors, and optimistic updates:
     ```jsx
     function Form() {
       const [state, formAction] = useFormState(serverAction, initialState);
       const { pending } = useFormStatus();
       
       return (
         <form action={formAction}>
           
           
             {pending ? 'Submitting...' : 'Submit'}
           
         </form>
       );
     }
     ```

     #### 4. **use() Hook**
     Read resources (Promises, Context) inside render:
     ```jsx
     function User({ userPromise }) {
       const user = use(userPromise); // Suspends until resolved
       return {user.name};
     }
     ```

     #### 5. **useOptimistic Hook**
     Implement optimistic UI updates:
     ```jsx
     function TodoList({ todos }) {
       const [optimisticTodos, addOptimisticTodo] = useOptimistic(
         todos,
         (state, newTodo) => [...state, { ...newTodo, pending: true }]
       );

       async function createTodo(title) {
         addOptimisticTodo({ id: Date.now(), title });
         await saveTodo(title);
       }

       return optimisticTodos.map(todo => (
         <Todo key={todo.id} {...todo} />
       ));
     }
     ```

     #### 6. **Document Metadata**
     Built-in support for `<title>`, `<meta>`, etc.:
     ```jsx
     function BlogPost({ post }) {
       return (
         <>
           <title>{post.title}</title>
           <meta name="description" content={post.excerpt} />
           <article>{post.content}</article>
         </>
       );
     }
     ```

     #### 7. **Asset Loading APIs**
     Preload resources for better performance:
     ```jsx
     import { preload, preinit } from 'react-dom';

     preload('/font.woff2', { as: 'font' });
     preinit('/script.js', { as: 'script' });
     ```

**[⬆ Back to Top](#table-of-contents)**

322. ### What is the use() hook in React 19?

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

     #### Reading Promises
     ```jsx
     import { use, Suspense } from 'react';

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

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

     #### Reading Context
     ```jsx
     import { use } from 'react';
     import { ThemeContext } from './context';

     function Button() {
       const theme = use(ThemeContext);
       return Click me;
     }
     ```

     #### 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!)
     ```jsx
     function Component({ showUser, userPromise }) {
       // ✅ This is allowed with use()!
       const user = showUser ? use(userPromise) : null;
       
       return user ? {user.name} : No user;
     }
     ```

**[⬆ Back to Top](#table-of-contents)**

323. ### What are Server Actions in React 19?

     **Server Actions** allow you to call server-side functions directly from client components without writing API endpoints.

     #### Basic Server Action
     ```jsx
     // app/actions.js
     'use server'

     export async function createPost(formData) {
       const title = formData.get('title');
       const content = formData.get('content');
       
       const post = await db.posts.create({
         title,
         content,
         userId: await getCurrentUser()
       });
       
       revalidatePath('/posts');
       redirect(`/posts/${post.id}`);
     }
     ```

     #### Using in Forms
     ```jsx
     // app/new-post.jsx
     import { createPost } from './actions';

     export default function NewPost() {
       return (
         <form action={createPost}>
           
           <textarea name="content" required />
           Create Post
         </form>
       );
     }
     ```

     #### With useFormState for Loading States
     ```jsx
     'use client'
     import { useFormState } from 'react-dom';
     import { createPost } from './actions';

     export default function NewPost() {
       const [state, formAction] = useFormState(createPost, { message: '' });
       
       return (
         <form action={formAction}>
           
           <textarea name="content" required />
           Create Post
           {state.message && {state.message}}
         </form>
       );
     }
     ```

     #### Progressive Enhancement
     Server Actions work even if JavaScript is disabled!
     ```jsx
     // This form works without JavaScript
     <form action={serverAction}>
       
       Subscribe
     </form>
     ```

     #### Security
     - Automatically CSRF protected
     - Always run on server (never exposed to client)
     - Can use server-only packages safely

**[⬆ Back to Top](#table-of-contents)**

324. ### What are useFormState and useFormStatus hooks?

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

     #### useFormState
     Manages form state and handles server responses:
     ```jsx
     '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}>
           
           {state.errors.email && {state.errors.email}}
           
           
           {state.errors.password && {state.errors.password}}
           
           Login
           {state.message && {state.message}}
         </form>
       );
     }
     ```

     #### useFormStatus
     Get the pending state of parent form:
     ```jsx
     'use client'
     import { useFormStatus } from 'react-dom';

     function SubmitButton() {
       const { pending, data, method, action } = useFormStatus();
       
       return (
         
           {pending ? 'Submitting...' : 'Submit'}
         
       );
     }

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

     #### Combining Both
     ```jsx
     'use client'
     import { useFormState, useFormStatus } from 'react-dom';

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

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

       return (
         <form action={formAction}>
           
           
           <SubmitButton />
           {state?.success && ✅ Profile updated!}
           {state?.error && ❌ {state.error}}
         </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

**[⬆ Back to Top](#table-of-contents)**

325. ### What is the useOptimistic hook?

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

     #### Basic Usage
     ```jsx
     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}>
             
             Add
           </form>
           
           
             {optimisticTodos.map(todo => (
               <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
                 {todo.title}
                 {todo.pending && ' ⏳'}
               </li>
             ))}
           
         </>
       );
     }
     ```

     #### With Server Actions
     ```jsx
     '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 (
         
           <h2>{post.title}</h2>
           
             ❤️ {optimisticLikes} Likes
           
         
       );
     }
     ```

     #### Complex Example with Error Handling
     ```jsx
     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 (
         
           {optimisticItems.map(item => (
             <li key={item.id}>
               {item.name}
                handleRemove(item.id)}>Remove
             </li>
           ))}
         
       );
     }
     ```

     #### 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

**[⬆ Back to Top](#table-of-contents)**

326. ### What is the React Compiler (React Forget)?

     The **React Compiler** (formerly known as React Forget) automatically optimizes your components by adding memoization where needed - eliminating the need for manual `useMemo`, `useCallback`, and `React.memo`.

     #### Before React Compiler
     ```jsx
     function TodoList({ todos, filter }) {
       // Manual optimization needed
       const filteredTodos = useMemo(() => {
         return todos.filter(todo => todo.status === filter);
       }, [todos, filter]);

       const handleToggle = useCallback((id) => {
         toggleTodo(id);
       }, [toggleTodo]);

       return (
         
           {filteredTodos.map(todo => (
             <TodoItem 
               key={todo.id} 
               todo={todo} 
               onToggle={handleToggle} 
             />
           ))}
         
       );
     }

     // Need to wrap in React.memo
     export default React.memo(TodoList);
     ```

     #### With React Compiler
     ```jsx
     function TodoList({ todos, filter }) {
       // Compiler automatically optimizes this!
       const filteredTodos = todos.filter(todo => todo.status === filter);

       const handleToggle = (id) => {
         toggleTodo(id);
       };

       return (
         
           {filteredTodos.map(todo => (
             <TodoItem 
               key={todo.id} 
               todo={todo} 
               onToggle={handleToggle} 
             />
           ))}
         
       );
     }

     // No React.memo needed!
     export default TodoList;
     ```

     #### How It Works
     1. **Analyzes code** during build time
     2. **Identifies expensive calculations** and renders
     3. **Automatically inserts memoization** where beneficial
     4. **Preserves React semantics** - your code still behaves correctly

     #### Benefits
     - ✅ Simpler code - no manual optimization
     - ✅ Better performance by default
     - ✅ Fewer bugs from incorrect dependencies
     - ✅ Easier to maintain and read
     - ✅ Works with existing code

     #### Enabling React Compiler
     ```jsx
     // next.config.js (Next.js)
     module.exports = {
       experimental: {
         reactCompiler: true
       }
     }

     // vite.config.js (Vite)
     import { defineConfig } from 'vite'
     import react from '@vitejs/plugin-react'

     export default defineConfig({
       plugins: [
         react({
           babel: {
             plugins: [['babel-plugin-react-compiler']]
           }
         })
       ]
     })
     ```

     #### When to Still Use Manual Optimization
     ```jsx
     // For external libraries without Compiler support
     import { expensiveLibFunction } from 'old-library';

     function MyComponent() {
       // May still need manual memoization here
       const result = useMemo(() => expensiveLibFunction(), []);
       return {result};
     }
     ```

     #### Compatibility
     - Works with React 18.3+ and React 19
     - Compatible with TypeScript
     - Works with all React hooks
     - Supports Server Components and Client Components

**[⬆ Back to Top](#table-of-contents)**

327. ### What is Streaming SSR and how does React 18+ improve it?

     **Streaming SSR** sends HTML to the browser in chunks as it's generated, rather than waiting for the entire page. React 18+ dramatically improves this with Suspense integration.

     #### Traditional SSR (Pre-React 18)
     ```
     Server: Wait for ALL data → Generate ALL HTML → Send to client
     Client: Receive HTML → Download ALL JS → Hydrate ALL components
     Problem: Slow components block entire page!
     ```

     #### Streaming SSR (React 18+)
     ```
     Server: Send HTML as it's ready, wrap slow parts in <Suspense>
     Client: Render immediately, hydrate progressively
     Benefit: User sees content faster!
     ```

     #### Basic Example
     ```jsx
     import { Suspense } from 'react';

     export default function Page() {
       return (
         <html>
           
             {/* Sent immediately */}
             <header>
               <h1>My App</h1>
             </header>

             {/* Sent immediately with fallback */}
             <Suspense fallback={Loading comments...}>
               <Comments /> {/* Streamed when ready */}
             </Suspense>

             {/* Also streamed separately */}
             <Suspense fallback={Loading recommendations...}>
               <Recommendations /> {/* Streamed when ready */}
             </Suspense>

             <footer>© 2026</footer>
           
         </html>
       );
     }
     ```

     #### Server Component with Data Fetching
     ```jsx
     // This is a Server Component (async!)
     async function Comments() {
       const comments = await db.comments.findMany();
       
       return (
         
           {comments.map(comment => (
             <li key={comment.id}>{comment.text}</li>
           ))}
         
       );
     }
     ```

     #### How It Works
     1. Server starts sending HTML immediately
     2. When it hits `<Suspense>`, it sends the fallback
     3. Continues streaming rest of the page
     4. When data is ready, sends the actual component
     5. Client replaces fallback with real content
     6. Hydration happens independently per component

     #### Selective Hydration
     ```jsx
     function App() {
       return (
         
           <header>Header</header> {/* Hydrates first */}
           
           <Suspense fallback={<Spinner />}>
             <HeavyComponent /> {/* Hydrates when user interacts */}
           </Suspense>
           
           <Suspense fallback={<Spinner />}>
             <Comments /> {/* Hydrates independently */}
           </Suspense>
         
       );
     }
     ```

     #### Benefits
     - **Faster TTFB** (Time to First Byte): User sees content sooner
     - **Better UX**: Progressive loading instead of blank screen
     - **Prioritized hydration**: Interactive elements hydrate first
     - **Resilient**: Slow components don't block fast ones

     #### Next.js App Router Example
     ```jsx
     // app/page.tsx
     import { Suspense } from 'react';
     import ProductList from './ProductList';
     import Reviews from './Reviews';

     export default function ProductPage() {
       return (
         
           <h1>Product Page</h1>
           
           {/* Streams product list first */}
           <Suspense fallback={}>
             
           </Suspense>

           {/* Reviews stream separately */}
           <Suspense fallback={<ReviewSkeleton />}>
             <Reviews />
           </Suspense>
         
       );
     }

     // These are async Server Components
     async function ProductList() {
       const products = await fetchProducts(); // Doesn't block Reviews
       return {/* render products */};
     }

     async function Reviews() {
       const reviews = await fetchReviews(); // Doesn't block ProductList
       return {/* render reviews */};
     }
     ```

     #### Key Requirements
     - Use React 18+ with `createRoot` and `hydrateRoot`
     - Wrap slow components in `<Suspense>`
     - Use frameworks supporting streaming (Next.js, Remix, etc.)
     - Server must support streaming responses

**[⬆ Back to Top](#table-of-contents)**

328. ### What is `renderToPipeableStream` and how is it different from `renderToString`?

     `renderToPipeableStream` is the React 18+ Node.js streaming SSR API from `react-dom/server`. It streams HTML in chunks, so users can see content earlier and React can coordinate Suspense boundaries during server rendering.

     `renderToString` is the older API that generates the entire HTML string first and sends it only after rendering is fully complete.

     #### Key Differences

     | Aspect | `renderToString` | `renderToPipeableStream` |
     | --- | --- | --- |
     | Rendering model | All-at-once | Streaming/chunked |
     | Suspense on server | Limited fallback behavior | First-class Suspense streaming |
     | Time to first byte | Usually slower for large pages | Faster, can flush shell early |
     | UX for slow data | Entire page waits | Progressive reveal with fallbacks |
     | Best for | Small/simple SSR pages | Modern SSR apps with async data |

     #### `renderToString` example

     ```javascript
     import express from "express";
     import { renderToString } from "react-dom/server";
     import App from "./App";

     const app = express();

     app.get("/", (req, res) => {
       const html = renderToString(<App />);
       res.send(`<!doctype html><html>${html}</html>`);
     });
     ```

     #### `renderToPipeableStream` example

     ```javascript
     import express from "express";
     import { renderToPipeableStream } from "react-dom/server";
     import App from "./App";

     const app = express();

     app.get("/", (req, res) => {
       const { pipe } = renderToPipeableStream(<App />, {
         onShellReady() {
           res.setHeader("Content-Type", "text/html");
           res.write("<!doctype html><html>");
           pipe(res);
         },
         onAllReady() {
           res.end("</html>");
         },
         onError(error) {
           console.error(error);
         },
       });
     });
     ```

     In practice, prefer `renderToPipeableStream` for React 18+ SSR because it improves perceived performance and works naturally with Suspense-driven progressive loading.

**[⬆ Back to Top](#table-of-contents)**

329. ### What is the difference between HOCs and Hooks?

     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:**

     ```jsx
     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:**

     ```jsx
     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).

**[⬆ Back to Top](#table-of-contents)**

330. ### Does `React.memo` prevent Context consumers from re-rendering?

     **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.

     ```jsx
     const CountContext = React.createContext();

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

     function App() {
       const [count, setCount] = useState(0);
       return (
         <CountContext.Provider value={count}>
            setCount((c) => c + 1)}>Increment
           <Display />
         </CountContext.Provider>
       );
     }
     ```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
     // 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 (
         {children}
       );
     }

     // 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;
     }
     ```

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

     function Toolbar() {
       const { theme, toggleTheme } = useTheme();
       return Current theme: {theme};
     }
     ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
     const INCREMENT = "counter/increment";
     const increment = () => ({ type: INCREMENT });

     function counterReducer(state = { value: 0 }, action) {
       switch (action.type) {
         case INCREMENT:
           return { ...state, value: state.value + 1 }; // must copy manually
         default:
           return state;
       }
     }
     ```

     **Redux Toolkit:**

     ```javascript
     import { createSlice, configureStore } from "@reduxjs/toolkit";

     const counterSlice = createSlice({
       name: "counter",
       initialState: { value: 0 },
       reducers: {
         increment: (state) => {
           state.value += 1; // "mutation" is safe — Immer produces new state
         },
       },
     });

     export const { increment } = counterSlice.actions;

     const store = configureStore({ reducer: { counter: counterSlice.reducer } });
     ```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
     // Server state handled manually — lots of boilerplate to get right
     function Users() {
       const [users, setUsers] = useState([]);
       const [loading, setLoading] = useState(true);
       const [error, setError] = useState(null);

       useEffect(() => {
         fetch("/api/users")
           .then((res) => res.json())
           .then(setUsers)
           .catch(setError)
           .finally(() => setLoading(false));
       }, []);
       // ...
     }
     ```

     ```jsx
     // Server state via React Query — caching, refetching, and status handled for you
     function Users() {
       const { data: users, isLoading, error } = useQuery({
         queryKey: ["users"],
         queryFn: () => fetch("/api/users").then((res) => res.json()),
       });
       // ...
     }
     ```

     In short, use local state/Context/Redux for **client state** (UI-only concerns), and a data-fetching library like React Query, RTK Query, or SWR for **server state** (anything that mirrors data owned by a backend).

**[⬆ Back to Top](#table-of-contents)**

334. ### How do you prevent unnecessary Redux re-renders?

     By default, `useSelector` re-renders a component whenever the **selected value's reference** changes between renders (it uses strict `===` comparison). Most unnecessary re-renders come from selectors that return a *new* object/array/function on every call, so React-Redux thinks the data changed even though it didn't. Ways to prevent this:

     1.  **Select the smallest piece of state you need** instead of the whole slice:

         ```javascript
         // BAD: re-renders whenever ANY field in `user` changes
         const user = useSelector((state) => state.user);

         // GOOD: only re-renders when `name` changes
         const name = useSelector((state) => state.user.name);
         ```

     2.  **Memoize derived/computed selectors** with `createSelector` (see next question) so a new array/object is only created when its actual inputs change.
     3.  **Use a custom equality function** (e.g., `shallowEqual` from `react-redux`) when you must select multiple fields as an object:

         ```javascript
         import { shallowEqual, useSelector } from "react-redux";

         const { name, email } = useSelector(
           (state) => ({ name: state.user.name, email: state.user.email }),
           shallowEqual
         );
         ```

     4.  **Split one large connected component into smaller ones**, each with its own narrow `useSelector`, so a state change only re-renders the component that actually cares about it.
     5.  **Wrap presentational children in `React.memo`** so they skip re-rendering when their own props haven't changed, even if their parent re-renders.

**[⬆ Back to Top](#table-of-contents)**

335. ### What is `createSelector`?

     `createSelector` (from **Reselect**, which Redux Toolkit re-exports) creates **memoized selectors**. It takes one or more "input selectors" and a "result function", and only recomputes the result when the *outputs* of the input selectors change — otherwise it returns the previously cached value.

     ```javascript
     import { createSelector } from "@reduxjs/toolkit";

     const selectItems = (state) => state.cart.items;

     // Recomputes total only when `items` reference actually changes
     const selectTotal = createSelector([selectItems], (items) =>
       items.reduce((sum, item) => sum + item.price * item.qty, 0)
     );

     function Cart() {
       const total = useSelector(selectTotal);
       // ...
     }
     ```

     Without memoization, computing `total` inline inside `useSelector` would return a brand-new number/object on every dispatch, which is fine for primitives but becomes a real problem when deriving arrays/objects (e.g., filtering or sorting a list), since a new reference on every render defeats `React.memo`/`useSelector`'s equality check and causes unnecessary re-renders.

**[⬆ Back to Top](#table-of-contents)**

336. ### What is normalized Redux state?

     **Normalized state** stores data the way a relational database would: each type of entity is kept in a lookup table keyed by ID, instead of being nested/duplicated inside arrays. Redux Toolkit's `createEntityAdapter` generates this shape for you.

     ```javascript
     // Un-normalized — posts are duplicated wherever they appear
     {
       posts: [
         { id: 1, title: "Post 1", author: { id: 1, name: "Sudheer" } },
         { id: 2, title: "Post 2", author: { id: 1, name: "Sudheer" } },
       ];
     }

     // Normalized — each entity stored once, referenced by id
     {
       posts: {
         ids: [1, 2],
         entities: {
           1: { id: 1, title: "Post 1", authorId: 1 },
           2: { id: 2, title: "Post 2", authorId: 1 },
         },
       },
       users: {
         ids: [1],
         entities: { 1: { id: 1, name: "Sudheer" } },
       },
     }
     ```

     ```javascript
     import { createEntityAdapter, createSlice } from "@reduxjs/toolkit";

     const postsAdapter = createEntityAdapter();

     const postsSlice = createSlice({
       name: "posts",
       initialState: postsAdapter.getInitialState(),
       reducers: {
         postAdded: postsAdapter.addOne,
         postUpdated: postsAdapter.updateOne,
       },
     });
     ```

**[⬆ Back to Top](#table-of-contents)**

337. ### Why is normalized state important for performance?

     1.  **O(1) lookups by ID** instead of scanning/`find()`-ing through an array every time a component needs one item.
     2.  **Updates are localized**: changing one entity only replaces that entity's entry in the `entities` map, so components subscribed to *other* entities don't see a changed reference and don't re-render.
     3.  **No duplicate data to keep in sync**: with nested/duplicated data, updating a single author's name might require updating it in every post that embeds it; normalized state updates it once.
     4.  **Cheaper equality checks**: since each entity is a small, independent object, memoized selectors (`createSelector`) and `useSelector` reference comparisons stay cheap and precise instead of comparing/deep-cloning large nested trees.
     5.  **Simpler reducers**: adding/removing/updating one item is a straightforward map operation, rather than mapping/filtering over deeply nested arrays.

**[⬆ Back to Top](#table-of-contents)**

338. ### What is Redux middleware?

     **Middleware** provides a way to extend Redux with custom logic that runs **between dispatching an action and the moment it reaches the reducer**. It's the standard extension point for side effects (logging, crash reporting, async calls, analytics) since reducers themselves must stay pure and synchronous.

     ```javascript
     import { configureStore } from "@reduxjs/toolkit";

     const logger = (store) => (next) => (action) => {
       console.log("dispatching", action);
       const result = next(action);
       console.log("next state", store.getState());
       return result;
     };

     const store = configureStore({
       reducer: rootReducer,
       middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
     });
     ```

     Common middleware includes `redux-thunk` (dispatch functions for async logic), `redux-saga` (generator-based side effects), `redux-logger` (action/state logging), and RTK's built-in serializable/immutable-state check middleware.

**[⬆ Back to Top](#table-of-contents)**

339. ### What is the Redux middleware signature?

     Middleware is written as **three nested (curried) functions**:

     ```javascript
     const exampleMiddleware = (store) => (next) => (action) => {
       // store  => { getState, dispatch }
       // next   => calls the next middleware in the chain (or the reducer if last)
       // action => the action currently being dispatched
       return next(action);
     };
     ```
/* Detailed source-code truncated for AI context efficiency. */

src/
   app/
     store.js            # configureStore() + root reducer wiring
   features/
     posts/
       postsSlice.js     # createSlice: reducer + actions + thunks
       postsSelectors.js # createSelector-based selectors
       PostList.jsx       # components using useSelector/useDispatch
     users/
       usersSlice.js
       usersSelectors.js
 ```

 Guidelines:

 1.  **Colocate** a feature's slice, selectors, thunks, and components in one folder instead of scattering related code across parallel `actions/reducers/constants` folders.
 2.  **One slice per domain concept** (posts, users, cart), created with `createSlice`, combined once in `store.js`.
 3.  **Keep components decoupled from the store shape** by reading data only through selectors, never `state.posts.entities` directly in a component.
 4.  **Normalize related/nested data** (see Q336) so features can reference each other by ID instead of duplicating data.
 5.  **Use RTK Query (or a dedicated API slice) for server state**, and keep hand-written slices for genuine client/app state.

// BAD: `total` is derived data stored redundantly in state
     // Now every reducer that touches `items` must also recompute `total`
     { items: [...], total: 42 }

     // GOOD: store only `items`; compute `total` with a memoized selector
     const selectItems = (state) => state.cart.items;
     const selectTotal = createSelector([selectItems], (items) =>
       items.reduce((sum, i) => sum + i.price * i.qty, 0)
     );
     ```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
     import { BrowserRouter } from "react-router-dom";
     // Standard choice for most deployed web apps
     
       <App />
     ;
     ```

     ```jsx
     import { HashRouter } from "react-router-dom";
     // Good when you can't configure server-side rewrites
     <HashRouter>
       <App />
     </HashRouter>;
     ```

     ```jsx
     import { MemoryRouter } from "react-router-dom";
     // Great for tests — you can even seed the starting route
     render(
       <MemoryRouter initialEntries={["/dashboard"]}>
         <App />
       </MemoryRouter>
     );
     ```

     In short: use **`BrowserRouter`** for real, deployed apps with clean URLs (as long as your server supports SPA fallback), **`HashRouter`** when you can't control server routing (plain static hosting), and **`MemoryRouter`** for tests or non-browser environments where there's no real URL bar to sync with.

**[⬆ Back to Top](#table-of-contents)**

350. ### What are dynamic routes and what are route parameters?

     A **dynamic route** is a route path that contains a placeholder segment (a *route parameter*) instead of a fixed, hard-coded value, so a single route definition can match many different URLs. **Route parameters** are the named placeholder segments (prefixed with `:` in React Router) whose actual values are extracted from the matched URL at runtime.

     ```jsx
     import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

     function UserProfile() {
       // useParams() returns an object of all dynamic segments matched for this route
       const { userId } = useParams();
       return Profile for user: {userId};
     }

     function App() {
       return (
         
           <Routes>
             {/* :userId is a route parameter — matches /users/1, /users/abc, etc. */}
             <Route path="/users/:userId" element={} />
           </Routes>
         
       );
     }
     ```

     A route can also define **multiple parameters** and an **optional catch-all (splat) parameter**:

     ```jsx
     // Multiple params: /posts/2024/react-hooks-guide
     <Route path="/posts/:year/:slug" element={} />

     // Optional segment (v6.4+): matches /shop and /shop/electronics
     <Route path="/shop/:category?" element={<Shop />} />

     // Splat/wildcard param: matches any depth, e.g. /docs/a/b/c
     <Route path="/docs/*" element={<Docs />} />
     ```

     ```jsx
     function Post() {
       const { year, slug } = useParams();
       // year -> "2024", slug -> "react-hooks-guide"
       return <h1>{slug} ({year})</h1>;
     }
     ```

     Key points:

     - Route params are always returned as **strings** by `useParams()` — convert them (e.g., `Number(id)`) if you need a number.
     - Static routes (`/about`) are matched exactly; dynamic routes (`/users/:userId`) match a whole family of URLs and are essential for detail/edit pages, pagination, category filters, etc.
     - Route params are different from **query/search params** (`?sort=asc`), which are read with `useSearchParams()` instead and are meant for optional, non-hierarchical data like filters or sorting.
     - Because dynamic segments can match unexpected values, always validate/guard params (e.g., check the fetched resource exists) rather than assuming the value is always well-formed.

**[⬆ Back to Top](#table-of-contents)**

351. ### How do you navigate programmatically in React Router?

     In React Router v6+, programmatic navigation (redirecting from code rather than a user clicking a link) is done with the **`useNavigate`** hook, which replaces the old `history.push()`/`this.props.history.push()` approach from v4/v5 (see [How do you programmatically navigate using React Router v4?](#how-do-you-programmatically-navigate-using-react-router-v4)).

     ```jsx
     import { useNavigate } from "react-router-dom";

     function LoginForm() {
       const navigate = useNavigate();

       async function handleSubmit(e) {
         e.preventDefault();
         await login();
         navigate("/dashboard");        // push a new entry (like clicking a link)
         // navigate("/dashboard", { replace: true }); // replace current entry (no back button to login)
         // navigate(-1);                 // go back, like history.back()
         // navigate("/users/42", { state: { from: "login" } }); // pass state to the next route
       }

       return <form onSubmit={handleSubmit}>{/* ... */}</form>;
     }
     ```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
     import { Link, NavLink } from "react-router-dom";

     // Plain in-app link — no active-state awareness
     <Link to="/about">About</Link>;

     // NavLink automatically applies the "active" class (or your own style function)
     // when the current URL matches "/dashboard"
     <NavLink
       to="/dashboard"
       className={({ isActive }) => (isActive ? "nav-link active" : "nav-link")}
     >
       Dashboard
     </NavLink>;

     // Plain <a> — causes a full browser navigation/reload, breaks SPA behavior
     [Dashboard (avoid for in-app links)](/dashboard);
     ```

     Rule of thumb: use `<Link>`/`<NavLink>` for any route inside your React Router tree, and reserve a plain `<a href>` for links leaving your app (external URLs, mailto:, downloadable files) or for non-SPA full-reload cases.

**[⬆ Back to Top](#table-of-contents)**

353. ### How do you implement protected/private routes?

     A protected (or private) route only renders its content when the user meets some condition (usually "is authenticated"), otherwise it redirects them elsewhere (e.g., to `/login`). In React Router v6+, the cleanest way is a small wrapper component that renders `<Outlet />` for its children or a `<Navigate>` redirect:

     ```jsx
     import { Navigate, Outlet, useLocation } from "react-router-dom";

     function RequireAuth() {
       const { user } = useAuth(); // your own auth hook/context
       const location = useLocation();

       if (!user) {
         // Redirect to login, remembering where the user was headed
         return <Navigate to="/login" state={{ from: location }} replace />;
       }

       return <Outlet />; // render the matched child route
     }
     ```

     ```jsx
     import { Routes, Route } from "react-router-dom";

     function App() {
       return (
         <Routes>
           <Route path="/login" element={<Login />} />

           {/* Every nested route below requires auth */}
           <Route element={<RequireAuth />}>
             <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/settings" element={<Settings />} />
           </Route>
         </Routes>
       );
     }
     ```

     After a successful login, read `location.state?.from` (set above) and `navigate(from, { replace: true })` to send the user back to the page they originally tried to reach.

     Key points:

     - Wrapping with a layout route (`<Route element={<RequireAuth />}>`) that renders `<Outlet />` lets you protect many nested routes at once, instead of guarding each `element` individually.
     - Use `replace` on the redirect so the protected URL isn't left in history (prevents "back button" from flashing the protected page).
     - For role-based protection (e.g., admin-only), generalize `RequireAuth` to accept an `allowedRoles` prop and check both authentication and authorization.
     - Client-side route guards are a UX convenience, not a security boundary — always enforce access control on the server/API too.

**[⬆ Back to Top](#table-of-contents)**

354. ### How do you handle 404 / Not Found routes?

     React Router matches routes top-to-bottom/most-specific-first, so a catch-all route with `path="*"` placed last will match any URL that didn't match an earlier route — this is the v6+ equivalent of the older approach in [How do you implement a default or NotFound page?](#how-to-implement-default-or-notfound-page).

     ```jsx
     import { Routes, Route } from "react-router-dom";

     function App() {
       return (
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
           <Route path="/users/:userId" element={} />

           {/* Catch-all — must be last; matches any unmatched path */}
           <Route path="*" element={<NotFound />} />
         </Routes>
       );
     }

     function NotFound() {
       return <h1>404 — Page Not Found</h1>;
     }
     ```

     For apps using the newer data router APIs (`createBrowserRouter`), a route-level `errorElement` handles both unmatched paths and thrown errors/loader failures for that branch:

     ```jsx
     import { createBrowserRouter } from "react-router-dom";

     const router = createBrowserRouter([
       {
         path: "/",
         element: <Root />,
         errorElement: <ErrorPage />, // renders on 404s and unhandled loader/action errors
         children: [{ path: "users/:userId", element: , loader: userLoader }],
       },
     ]);
     ```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
     import { createBrowserRouter, RouterProvider, useLoaderData, Form, redirect } from "react-router-dom";

     // Loader: runs before the route renders, its return value is available via useLoaderData()
     async function userLoader({ params }) {
       const res = await fetch(`/api/users/${params.userId}`);
       if (!res.ok) throw new Response("Not Found", { status: 404 });
       return res.json();
     }

     // Action: runs when a <Form> on this route is submitted
     async function updateUserAction({ request, params }) {
       const formData = await request.formData();
       await fetch(`/api/users/${params.userId}`, { method: "PUT", body: formData });
       return redirect(`/users/${params.userId}`); // navigate after a successful mutation
     }

     function UserProfile() {
       const user = useLoaderData(); // already-fetched data, no useEffect needed
       return (
         <Form method="put">
           
           Save
         </Form>
       );
     }

     const router = createBrowserRouter([
       {
         path: "/users/:userId",
         element: ,
         loader: userLoader,
         action: updateUserAction,
         errorElement: <ErrorPage />,
       },
     ]);

     function App() {
       return <RouterProvider router={router} />;
     }
     ```

     Key points:

     - Loaders run **before** the route component renders, so data is ready immediately — no `useEffect` + `isLoading` flicker for the initial fetch.
     - Errors thrown inside a `loader`/`action` (including thrown `Response`s for status codes) are caught by the nearest route's `errorElement`, unifying error handling for fetch failures and render errors.
     - `useFetcher()` lets you call loaders/actions **without** navigating (e.g., optimistic "like" buttons, inline edits in a list).
     - This pattern requires the data-router setup (`createBrowserRouter` + `<RouterProvider>`) instead of the plain `<BrowserRouter>`/`<Routes>` components — it's opt-in, existing `<Routes>`-based apps keep working unchanged.

**[⬆ Back to Top](#table-of-contents)**

356. ### How do query parameters work?

     Query (search) parameters are the `?key=value&key2=value2` portion of a URL. Unlike route params (see [What are dynamic routes and what are route parameters?](#what-are-dynamic-routes-and-what-are-route-parameters)), they aren't part of the route's `path` definition — they're read and updated with the **`useSearchParams`** hook, which mirrors the browser's `URLSearchParams` API.

     ```jsx
     import { useSearchParams } from "react-router-dom";

     function ProductList() {
       // URL: /products?category=shoes&sort=price&page=2
       const [searchParams, setSearchParams] = useSearchParams();

       const category = searchParams.get("category"); // "shoes"
       const sort = searchParams.get("sort");           // "price"
       const page = Number(searchParams.get("page") ?? "1"); // params are always strings

       function handleSortChange(nextSort) {
         // Updates the URL (?sort=...) and triggers a re-render with the new value
         setSearchParams((prev) => {
           prev.set("sort", nextSort);
           return prev;
         });
       }

       return (
         
           <select value={sort ?? ""} onChange={(e) => handleSortChange(e.target.value)}>
             <option value="price">Price</option>
             <option value="rating">Rating</option>
           </select>
           {/* render products filtered by category, sorted by sort, paginated by page */}
         
       );
     }
     ```

     Key points:

     - `useSearchParams()` returns `[searchParams, setSearchParams]`, similar to `useState` — `searchParams` is a read-only `URLSearchParams` instance (`.get()`, `.getAll()`, `.has()`), and `setSearchParams()` updates the URL (and re-renders).
     - Updating search params pushes a new history entry by default; pass `{ replace: true }` as a second argument to `setSearchParams` to avoid cluttering back/forward history (useful for things like live search-as-you-type).
     - Query params are ideal for **optional, non-hierarchical, shareable UI state** — filters, sorting, pagination, search text — because the resulting URL can be bookmarked/shared and still reproduces the same view.
     - Unlike route params, missing query params don't cause a 404/no-match; `searchParams.get("missing")` simply returns `null`, so always provide sensible defaults.

**[⬆ Back to Top](#table-of-contents)**

## Old Q&A

0. ### What is Concurrent Rendering? (Legacy)

   The Concurrent rendering makes React apps to be more responsive by rendering component trees without blocking the main UI thread. It allows React to interrupt a long-running render to handle a high-priority event. i.e, When you enabled concurrent Mode, React will keep an eye on other tasks that need to be done, and if there's something with a higher priority it will pause what it is currently rendering and let the other task finish first. You can enable this in two ways,

   ```javascript
   // 1. Part of an app by wrapping with ConcurrentMode
   <React.unstable_ConcurrentMode>
     <Something />
   </React.unstable_ConcurrentMode>;

   // 2. Whole app using createRoot
   ReactDOM.unstable_createRoot(domNode).render(<App />);

function HOC(WrappedComponent) {
      return class Test extends Component {
        render() {
          const newProps = {
            title: "New Header",
            footer: false,
            showFeatureX: false,
            showFeatureY: true,
          };

          return <WrappedComponent {...this.props} {...newProps} />;
        }
      };
    }
    ```

    **[⬆ Back to Top](#table-of-contents)**

13. ### What is context?

    _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.

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

    **[⬆ Back to Top](#table-of-contents)**

14. ### What is the purpose of using super constructor with props argument?

    A child class constructor cannot make use of `this` reference until the `super()` method has been called. The same applies to ES6 sub-classes as well. The main reason for passing props parameter to `super()` call is to access `this.props` in your child constructors.

    **Passing props:**

    ```javascript
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);

        console.log(this.props); // prints { name: 'John', age: 42 }
      }
    }
    ```

    **Not passing props:**

    ```javascript
    class MyComponent extends React.Component {
      constructor(props) {
        super();

        console.log(this.props); // prints undefined

        // but props parameter is still available
        console.log(props); // prints { name: 'John', age: 42 }
      }

      render() {
        // no difference outside constructor
        console.log(this.props); // prints { name: 'John', age: 42 }
      }
    }
    ```

    The above code snippets reveals that `this.props` is different only within the constructor. It would be the same outside the constructor.

    **[⬆ Back to Top](#table-of-contents)**

15. ### How to set state with a dynamic key name?

    If you are using ES6 or the Babel transpiler to transform your JSX code then you can accomplish this with _computed property names_.

    ```javascript
    handleInputChange(event) {
      this.setState({ [event.target.id]: event.target.value })
    }
    ```

    **[⬆ Back to Top](#table-of-contents)**

16. ### What would be the common mistake of function being called every time the component renders?

    You need to make sure that function is not being called while passing the function as a parameter.

    ```jsx harmony
    render() {
      // Wrong: handleClick is called instead of passed as a reference!
      return {'Click Me'}
    }
    ```

    Instead, pass the function itself without parenthesis:

    ```jsx harmony
    render() {
      // Correct: handleClick is passed as a reference!
      return {'Click Me'}
    }
    ```

    **[⬆ Back to Top](#table-of-contents)**

17. ### What are error boundaries in React v16?

    **Note:** Error boundaries were introduced in React 16 and remain valid in current React versions (18/19).

    _Error boundaries_ are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

    A class component becomes an error boundary if it defines these lifecycle methods:
    - `static getDerivedStateFromError(error)` - for rendering fallback UI
    - `componentDidCatch(error, info)` - for logging error information

    ```jsx harmony
    class ErrorBoundary extends React.Component {
      constructor(props) {
        super(props);
        this.state = { hasError: false };
      }

      static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI
        return { hasError: true };
      }

      componentDidCatch(error, info) {
        // Log error to an error reporting service
        console.error('Error caught by boundary:', error, info);
        logErrorToMyService(error, info);
      }

      render() {
        if (this.state.hasError) {
          // Render custom fallback UI
          return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
      }
    }
    ```

    Usage:

    ```jsx harmony
    <ErrorBoundary>
      <MyWidget />
    </ErrorBoundary>
    ```

    **Note:** Error boundaries currently only work with class components. There is no hook equivalent yet, though `use()` hook in React 19 provides some error handling capabilities.

    **[⬆ Back to Top](#table-of-contents)**

18. ### How are error boundaries handled in React v15?

    **⚠️ LEGACY:** This question is only relevant for historical context. React v15 is extremely outdated (released in 2016).

    React v15 provided very basic support for _error boundaries_ using the `unstable_handleError` method. This was an experimental feature that was later redesigned and renamed to `componentDidCatch` in React v16.

    **Modern Error Boundaries (React 16+):**
    - Use `static getDerivedStateFromError(error)` for UI fallback
    - Use `componentDidCatch(error, info)` for logging
    - Work consistently across server and client rendering

    **[⬆ Back to Top](#table-of-contents)**

19. ### What is the purpose of render method of `react-dom`?

    This method is used to render a React element into the DOM in the supplied container and return a reference to the component. If the React element was previously rendered into container, it will perform an update on it and only mutate the DOM as necessary to reflect the latest changes.

    ```
    ReactDOM.render(element, container, [callback])
    ```

    If the optional callback is provided, it will be executed after the component is rendered or updated.

    **[⬆ Back to Top](#table-of-contents)**

20. ### What will happen if you use `setState()` in constructor?

    When you use `setState()`, then apart from assigning to the object state React also re-renders the component and all its children. You would get error like this: _Can only update a mounted or mounting component._ So we need to use `this.state` to initialize variables inside constructor.

    **[⬆ Back to Top](#table-of-contents)**

21. ### Is it good to use `setState()` in `componentWillMount()` method?

    **⚠️ DEPRECATED:** `componentWillMount()` has been removed in React 17+. This question is only relevant for legacy React applications.

    **Historical Context:**
    While it was technically safe to use `setState()` inside `componentWillMount()`, this lifecycle method is now deprecated and removed because:
    - It caused issues with server-side rendering
    - Created confusion about the right place for async operations
    - Was problematic with React's concurrent rendering features

    **Modern Alternative:**
    Use `componentDidMount()` for side effects and async initialization in class components:

    ```jsx harmony
    componentDidMount() {
      axios.get(`api/todos`)
        .then((result) => {
          this.setState({
            messages: [...result.data]
          })
        })
    }
    ```

    **[⬆ Back to Top](#table-of-contents)**

22. ### What will happen if you use props in initial state?

    If the props on the component are changed without the component being refreshed, the new prop value will never be displayed because the constructor function will never update the current state of the component. The initialization of state from props only runs when the component is first created.

    The below component won't display the updated input value:

    ```jsx harmony
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          records: [],
          inputValue: this.props.inputValue,
        };
      }

      render() {
        return {this.state.inputValue};
      }
    }
    ```

    Using props inside render method will update the value:

    ```jsx harmony
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          record: [],
        };
      }

      render() {
        return {this.props.inputValue};
      }
    }
    ```

    **[⬆ Back to Top](#table-of-contents)**

23. ### How you use decorators in React?

    You can _decorate_ your _class_ components, which is the same as passing the component into a function. **Decorators** are flexible and readable way of modifying component functionality.

    ```jsx harmony
    @setTitle("Profile")
    class Profile extends React.Component {
      //....
    }

    /*
      title is a string that will be set as a document title
      WrappedComponent is what our decorator will receive when
      put directly above a component class as seen in the example above
    */
    const setTitle = (title) => (WrappedComponent) => {
      return class extends React.Component {
        componentDidMount() {
          document.title = title;
        }

        render() {
          return <WrappedComponent {...this.props} />;
        }
      };
    };
    ```

    **Note:** Decorators are a feature that didn't make it into ES7, but are currently a _stage 2 proposal_.

    **[⬆ Back to Top](#table-of-contents)**

24. ### What is CRA and its benefits?

    **⚠️ OUTDATED:** Create React App (CRA) is no longer actively maintained and is not recommended for new projects as of 2024+.

    **Modern Alternatives:** Use **Vite** (for SPAs) or **Next.js** (for full-stack/SSR) instead. See recommended setup commands at the end of this answer.

    ---

    **Historical Context:**
    
    The `create-react-app` CLI tool allows you to quickly create & run React applications with no configuration step.

    Let's create Todo App using _CRA_:

    ```console
    # Installation
    $ npm install create-react-app

    # Create new project
    $ create-react-app todo-app
    $ cd todo-app

    # Build, test and run
    $ npm run build
    $ npm run test
    $ npm start
    ```

    It includes everything we need to build a React app:

    1. React, JSX, ES6, and Flow syntax support.
    2. Language extras beyond ES6 like the object spread operator.
    3. Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
    4. A fast interactive unit test runner with built-in support for coverage reporting.
    5. A live development server that warns about common mistakes.
    6. A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.

    ---

    **Modern Alternatives (Recommended 2026):**

    **1. Vite (Best for SPAs):**
    ```console
    npm create vite@latest my-app -- --template react
    cd my-app
    npm install
    npm run dev
    ```
    - Lightning-fast HMR (Hot Module Replacement)
    - Modern ESM-based development
    - Optimized production builds with Rollup

    **2. Next.js (Best for full-stack/SSR):**
    ```console
    npx create-next-app@latest my-app
    cd my-app
    npm run dev
    ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
    class MyComponent extends React.Component {
      static getDerivedStateFromProps(props, state) {
        // ...
      }
    }
    ```

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

    **[⬆ Back to Top](#table-of-contents)**

28. ### What is the purpose of `getSnapshotBeforeUpdate()` lifecycle method?

    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()`.

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

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

    **[⬆ Back to Top](#table-of-contents)**

29. ### What is the recommended way for naming components?

    It is recommended to name the component by reference instead of using `displayName`.

    Using `displayName` for naming component:

    ```javascript
    export default React.createClass({
      displayName: "TodoApp",
      // ...
    });
    ```

    The **recommended** approach:

    ```javascript
    export default class TodoApp extends React.Component {
      // ...
    }
    ```

    also

    ```javascript
    const TodoApp = () => {
      //...
    };
    export default TodoApp;
    ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
    // assuming this.state.count === 0
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
    // this.state.count === 1, not 3
    ```

    If we pass a function to `setState()`, the count gets incremented correctly.

    ```javascript
    this.setState((prevState, props) => ({
      count: prevState.count + props.increment,
    }));
    // this.state.count === 3 as expected
    ```

    **(OR)**

    ### Why function is preferred over object for `setState()`?

    React may batch multiple `setState()` calls into a single update for performance. Because `this.props` and `this.state` may be updated asynchronously, you should not rely on their values for calculating the next state.

    This counter example will fail to update as expected:

    ```javascript
    // Wrong
    this.setState({
      counter: this.state.counter + this.props.increment,
    });
    ```

    The preferred approach is to call `setState()` with function rather than object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument.

    ```javascript
    // Correct
    this.setState((prevState, props) => ({
      counter: prevState.counter + props.increment,
    }));
    ```

    **[⬆ Back to Top](#table-of-contents)**

32. ### Why is `isMounted()` an anti-pattern and what is the proper solution?

    The primary use case for `isMounted()` is to avoid calling `setState()` after a component has been unmounted, because it will emit a warning.

    ```javascript
    if (this.isMounted()) {
      this.setState({...})
    }
    ```

    Checking `isMounted()` before calling `setState()` does eliminate the warning, but it also defeats the purpose of the warning. Using `isMounted()` is a code smell because the only reason you would check is because you think you might be holding a reference after the component has unmounted.

    An optimal solution would be to find places where `setState()` might be called after a component has unmounted, and fix them. Such situations most commonly occur due to callbacks, when a component is waiting for some data and gets unmounted before the data arrives. Ideally, any callbacks should be canceled in `componentWillUnmount()`, prior to unmounting.

    **[⬆ Back to Top](#table-of-contents)**

33. ### What is the difference between constructor and getInitialState?

    You should initialize state in the constructor when using ES6 classes, and `getInitialState()` method when using `React.createClass()`.

    **Using ES6 classes:**

    ```javascript
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          /* initial state */
        };
      }
    }
    ```

    **Using `React.createClass()`:**

    ```javascript
    const MyComponent = React.createClass({
      getInitialState() {
        return {
          /* initial state */
        };
      },
    });
    ```

    **Note:** `React.createClass()` is deprecated and removed in React v16. Use plain JavaScript classes instead.

    **[⬆ Back to Top](#table-of-contents)**

34. ### Can you force a component to re-render without calling setState?

    By default, when your component's state or props change, your component will re-render. If your `render()` method depends on some other data, you can tell React that the component needs re-rendering by calling `forceUpdate()`.

    ```javascript
    component.forceUpdate(callback);
    ```

    It is recommended to avoid all uses of `forceUpdate()` and only read from `this.props` and `this.state` in `render()`.

    **[⬆ Back to Top](#table-of-contents)**

35. ### What is the difference between `super()` and `super(props)` in React using ES6 classes?

    When you want to access `this.props` in `constructor()` then you should pass props to `super()` method.

    **Using `super(props)`:**

    ```javascript
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        console.log(this.props); // { name: 'John', ... }
      }
    }
    ```

    **Using `super()`:**

    ```javascript
    class MyComponent extends React.Component {
      constructor(props) {
        super();
        console.log(this.props); // undefined
      }
    }
    ```

    Outside `constructor()` both will display same value for `this.props`.

    **[⬆ Back to Top](#table-of-contents)**

36. ### What is the difference between `setState()` and `replaceState()` methods?

    When you use `setState()` the current and previous states are merged. `replaceState()` throws out the current state, and replaces it with only what you provide. Usually `setState()` is used unless you really need to remove all previous keys for some reason. You can also set state to `false`/`null` in `setState()` instead of using `replaceState()`.

**[⬆ Back to Top](#table-of-contents)**

37. ### How to listen to state changes?

    The `componentDidUpdate` lifecycle method will be called when state changes. You can compare provided state and props values with current state and props to determine if something meaningful changed.

    ```
    componentDidUpdate(object prevProps, object prevState)
    ```

    **Note:** The previous releases of ReactJS also uses `componentWillUpdate(object nextProps, object nextState)` for state changes. It has been deprecated in latest releases.

**[⬆ Back to Top](#table-of-contents)**

38. ### What is the recommended approach of removing an array element in React state?

    The better approach is to use `Array.prototype.filter()` method.

    For example, let's create a `removeItem()` method for updating the state.

    ```javascript
    removeItem(index) {
      this.setState({
        data: this.state.data.filter((item, i) => i !== index)
      })
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

39. ### Is it possible to use React without rendering HTML?

    It is possible. Below are the possible options:

    ```jsx harmony
    render() {
      return false
    }
    ```

    ```jsx harmony
    render() {
      return true
    }
    ```

    ```jsx harmony
    render() {
      return null
    }
    ```

    React version >=16.0.0:

    ```jsx harmony
    render() {
      return []
    }
    ```

    ```jsx harmony
    render() {
      return ""
    }
    ```

    React version >=16.2.0:

    ```jsx harmony
    render() {
      return <React.Fragment></React.Fragment>
    }
    ```

    ```jsx harmony
    render() {
      return <></>
    }
    ```

    React version >=18.0.0:

    ```jsx harmony
    render() {
      return undefined
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

40. ### What are the possible ways of updating objects in state?

    1.  **Calling `setState()` with an object to merge with state:**

        - Using `Object.assign()` to create a copy of the object:

          ```javascript
          const user = Object.assign({}, this.state.user, { age: 42 });
          this.setState({ user });
          ```

        - Using _spread operator_:

          ```javascript
          const user = { ...this.state.user, age: 42 };
          this.setState({ user });
          ```

    2.  **Calling `setState()` with a function:**

        ```javascript
        this.setState((prevState) => ({
          user: {
            ...prevState.user,
            age: 42,
          },
        }));
        ```

**[⬆ Back to Top](#table-of-contents)**

41. ### What are the approaches to include polyfills in your `create-react-app`?

    There are approaches to include polyfills in create-react-app,

    1.  **Manual import from `core-js`:**

        Create a file called (something like) `polyfills.js` and import it into root `index.js` file. Run `npm install core-js` or `yarn add core-js` and import your specific required features.

        ```javascript
        import "core-js/fn/array/find";
        import "core-js/fn/array/includes";
        import "core-js/fn/number/is-nan";
        ```

    2.  **Using Polyfill service:**

        Use the polyfill.io CDN to retrieve custom, browser-specific polyfills by adding this line to `index.html`:

        ```html
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>
        ```

        In the above script we had to explicitly request the `Array.prototype.includes` feature as it is not included in the default feature set.

**[⬆ Back to Top](#table-of-contents)**

42. ### How to use https instead of http in create-react-app?

    You just need to use `HTTPS=true` configuration. You can edit your `package.json` scripts section:

    ```json
    "scripts": {
      "start": "set HTTPS=true && react-scripts start"
    }
    ```

    or just run `set HTTPS=true && npm start`

**[⬆ Back to Top](#table-of-contents)**

43. ### How to avoid using relative path imports in create-react-app?

    Create a file called `.env` in the project root and write the import path:

    ```
    NODE_PATH=src/app
    ```

    After that restart the development server. Now you should be able to import anything inside `src/app` without relative paths.

**[⬆ Back to Top](#table-of-contents)**

44. ### How to update a component every second?

    You need to use `setInterval()` to trigger the change, but you also need to clear the timer when the component unmounts to prevent errors and memory leaks.

    ```javascript
    componentDidMount() {
      this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000)
    }

    componentWillUnmount() {
      clearInterval(this.interval)
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

45. ### Why is a component constructor called only once?

    React's _reconciliation_ algorithm assumes that without any information to the contrary, if a custom component appears in the same place on subsequent renders, it's the same component as before, so reuses the previous instance rather than creating a new one.

**[⬆ Back to Top](#table-of-contents)**

46. ### How to define constants in React?

    You can use ES7 `static` field to define constant.

    ```javascript
    class MyComponent extends React.Component {
      static DEFAULT_PAGINATION = 10;
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

47. ### How to programmatically trigger click event in React?

    You could use the ref prop to acquire a reference to the underlying `HTMLInputElement` object through a callback, store the reference as a class property, then use that reference to later trigger a click from your event handlers using the `HTMLElement.click` method.

    This can be done in two steps:

    1.  Create ref in render method:

        ```jsx harmony
         (this.inputElement = input)} />
        ```

    2.  Apply click event in your event handler:

        ```javascript
        this.inputElement.click();
        ```

**[⬆ Back to Top](#table-of-contents)**

48. ### How to make AJAX call and in which component lifecycle methods should I make an AJAX call?

    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 Error: {error.message};
        } else {
          return (
            
              {employees.map((employee) => (
                <li key={employee.name}>
                  {employee.name}-{employee.experience}
                </li>
              ))}
            
          );
        }
      }
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

49. ### What are render props?

    **Render Props** is a technique for sharing code/logic between components using a prop whose value is a function that returns a React element. Instead of duplicating stateful logic in every component that needs it, a "provider" component encapsulates the logic and delegates *what to render* to its caller via this function prop.

    ```jsx harmony
    <DataProvider render={(data) => <h1>{`Hello ${data.target}`}</h1>} />
    ```

    #### Full example

    ```jsx harmony
    class DataProvider extends React.Component {
      state = { target: "World" };

      render() {
        // Instead of hardcoding what to render, delegate it via the render prop
        return this.props.render(this.state);
      }
    }

    function App() {
      return (
        <DataProvider render={(data) => <h1>{`Hello ${data.target}`}</h1>} />
      );
    }
    ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
    class App extends Component {
      componentDidMount() {
        this.props.fetchData();
      }

      render() {
        return this.props.isLoaded ? (
          {"Loaded"}
        ) : (
          {"Not Loaded"}
        );
      }
    }

    const mapStateToProps = (state) => ({
      isLoaded: state.isLoaded,
    });

    const mapDispatchToProps = { fetchData };

    export default connect(mapStateToProps, mapDispatchToProps)(App);
    ```

**[⬆ Back to Top](#table-of-contents)**

51. ### How to use `connect()` from React Redux?

    You need to follow two steps to use your store in your container:

    1.  **Use `mapStateToProps()`:** It maps the state variables from your store to the props that you specify.
    2.  **Connect the above props to your container:** The object returned by the `mapStateToProps` function is connected to the container. You can import `connect()` from `react-redux`.

        ```jsx harmony
        import React from "react";
        import { connect } from "react-redux";

        class App extends React.Component {
          render() {
            return {this.props.containerData};
          }
        }

        function mapStateToProps(state) {
          return { containerData: state.data };
        }

        export default connect(mapStateToProps)(App);
        ```

**[⬆ Back to Top](#table-of-contents)**

52. ### Whats the purpose of `at` symbol in the Redux connect decorator?

    The **@** symbol is in fact a JavaScript expression used to signify decorators. _Decorators_ make it possible to annotate and modify classes and properties at design time.

    Let's take an example setting up Redux without and with a decorator.

    - **Without decorator:**

      ```javascript
      import React from "react";
      import * as actionCreators from "./actionCreators";
      import { bindActionCreators } from "redux";
      import { connect } from "react-redux";

      function mapStateToProps(state) {
        return { todos: state.todos };
      }

      function mapDispatchToProps(dispatch) {
        return { actions: bindActionCreators(actionCreators, dispatch) };
      }

      class MyApp extends React.Component {
        // ...define your main app here
      }

      export default connect(mapStateToProps, mapDispatchToProps)(MyApp);
      ```

    - **With decorator:**

      ```javascript
      import React from "react";
      import * as actionCreators from "./actionCreators";
      import { bindActionCreators } from "redux";
      import { connect } from "react-redux";

      function mapStateToProps(state) {
        return { todos: state.todos };
      }

      function mapDispatchToProps(dispatch) {
        return { actions: bindActionCreators(actionCreators, dispatch) };
      }

      @connect(mapStateToProps, mapDispatchToProps)
      export default class MyApp extends React.Component {
        // ...define your main app here
      }
      ```

    The above examples are almost similar except the usage of decorator. The decorator syntax isn't built into any JavaScript runtimes yet, and is still experimental and subject to change. You can use babel for the decorators support.

**[⬆ Back to Top](#table-of-contents)**

53. ### How to use TypeScript in `create-react-app` application?

        Starting from [email protected]+ releases onwards, you can now optionally start a new app from a template by appending `--template [template-name]` to the creation command. If you don't select a template, it will create your project with base template. Remember that templates are always named in the format `cra-template-[template-name]`, here you only need to fill the `[template-name]` section.

        The typeScript can be used in your project by appending `--template typescript` to the creation command.

         ```bash
         npx create-react-app my-app --template typescript
         ```

        But if you are using React Scripting between [email protected] and [email protected] , there is a built-in support for TypeScript. i.e, `create-react-app` now supports TypeScript natively. You can just pass `--typescript` option as below

         ```bash
         npx create-react-app my-app --typescript

         # or

         yarn create react-app my-app --typescript
         ```

         Whereas for lower versions of react scripts, just supply `--scripts-version` option as `react-scripts-ts` while you create a new project. `react-scripts-ts` is a set of adjustments to take the standard `create-react-app` project pipeline and bring TypeScript into the mix.

         Now the project layout should look like the following:

         ```
         my-app/
         ├─ .gitignore
         ├─ images.d.ts
         ├─ node_modules/
         ├─ public/
         ├─ src/
         │  └─ ...
         ├─ package.json
         ├─ tsconfig.json
         ├─ tsconfig.prod.json
         ├─ tsconfig.test.json
         └─ tslint.json
         ```

    **[⬆ Back to Top](#table-of-contents)**

54. ### Does the statics object work with ES6 classes in React?

    No, `statics` only works with `React.createClass()`:

    ```javascript
    someComponent = React.createClass({
      statics: {
        someMethod: function () {
          // ..
        },
      },
    });
    ```

    But you can write statics inside ES6+ classes as below,

    ```javascript
    class Component extends React.Component {
      static propTypes = {
        // ...
      };

      static someMethod() {
        // ...
      }
    }
    ```

    or writing them outside class as below,

    ```javascript
    class Component extends React.Component {
       ....
    }

    Component.propTypes = {...}
    Component.someMethod = function(){....}
    ```

**[⬆ Back to Top](#table-of-contents)**

55. ### Why are inline ref callbacks or functions not recommended?

    If the ref callback is defined as an inline function, it will get called twice during updates, first with null and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one.

    ```jsx
    class UserForm extends Component {
      handleSubmit = () => {
        console.log("Input Value is: ", this.input.value);
      };

      render() {
        return (
          <form onSubmit={this.handleSubmit}>
             (this.input = input)} /> //
            Access DOM input in handle submit
            Submit
          </form>
        );
      }
    }
    ```

    But our expectation is for the ref callback to get called once, when the component mounts. One quick fix is to use the ES7 class property syntax to define the function

    ```jsx
    class UserForm extends Component {
      handleSubmit = () => {
        console.log("Input Value is: ", this.input.value);
      };

      setSearchInput = (input) => {
        this.input = input;
      };

      render() {
        return (
          <form onSubmit={this.handleSubmit}>
             // Access DOM input
            in handle submit
            Submit
          </form>
        );
      }
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

56. ### What are HOC factory implementations?

    There are two main ways of implementing HOCs in React.

    1.  Props Proxy (PP) and
    2.  Inheritance Inversion (II).

    But they follow different approaches for manipulating the _WrappedComponent_.

    **Props Proxy**

    In this approach, the render method of the HOC returns a React Element of the type of the WrappedComponent. We also pass through the props that the HOC receives, hence the name **Props Proxy**.

    ```jsx
    function ppHOC(WrappedComponent) {
      return class PP extends React.Component {
        render() {
          return <WrappedComponent {...this.props} />;
        }
      };
    }
    ```

    **Inheritance Inversion**

    In this approach, the returned HOC class (Enhancer) extends the WrappedComponent. It is called Inheritance Inversion because instead of the WrappedComponent extending some Enhancer class, it is passively extended by the Enhancer. In this way the relationship between them seems **inverse**.

    ```jsx
    function iiHOC(WrappedComponent) {
      return class Enhancer extends WrappedComponent {
        render() {
          return super.render();
        }
      };
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

57. ### How to use class field declarations syntax in React classes?

    React Class Components can be made much more concise using the class field declarations. You can initialize the local state without using the constructor and declare class methods by using arrow functions without the extra need to bind them.

    Let's take a counter example to demonstrate class field declarations for state without using constructor and methods without binding,

    ```jsx
    class Counter extends Component {
      state = { value: 0 };

      handleIncrement = () => {
        this.setState((prevState) => ({
          value: prevState.value + 1,
        }));
      };

      handleDecrement = () => {
        this.setState((prevState) => ({
          value: prevState.value - 1,
        }));
      };

      render() {
        return (
          
            {this.state.value}

            +
            -
          
        );
      }
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

58. ### Why do you not need error boundaries for event handlers?

    Error boundaries do not catch errors inside event handlers.

    React doesn’t need error boundaries to recover from errors in event handlers. Unlike the render method and lifecycle methods, the event handlers don’t happen during rendering. So if they throw, React still knows what to display on the screen.

    If you need to catch an error inside an event handler, use the regular JavaScript try / catch statement:

    ```javascript
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = { error: null };
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick() {
        try {
          // Do something that could throw
        } catch (error) {
          this.setState({ error });
        }
      }

      render() {
        if (this.state.error) {
          return <h1>Caught an error.</h1>;
        }
        return Click Me;
      }
    }
    ```

    Note that the above example is demonstrating regular JavaScript behavior and doesn’t use error boundaries.

**[⬆ Back to Top](#table-of-contents)**

59. ### What is the difference between try catch block and error boundaries?

    Try catch block works with imperative code whereas error boundaries are meant for declarative code to render on the screen.

    For example, the try catch block used for below imperative code

    ```javascript
    try {
      showButton();
    } catch (error) {
      // ...
    }
    ```

    Whereas error boundaries wrap declarative code as below,

    ```javascript
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
    ```
/* Detailed source-code truncated for AI context efficiency. */
```javascript
    constructor(props) {
      super(props);
      // Don't call this.setState() here!
      this.state = { counter: 0 };
      this.handleClick = this.handleClick.bind(this);
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

63. ### Is it mandatory to define constructor for React component?
    No, it is not mandatory. i.e, If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

**[⬆ Back to Top](#table-of-contents)**

64. ### Why should not call setState in componentWillUnmount?
    You should not call `setState()` in `componentWillUnmount()` because once a component instance is unmounted, it will never be mounted again.

**[⬆ Back to Top](#table-of-contents)**

65. ### What is the purpose of getDerivedStateFromError?

    This lifecycle method is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state.

    The signature of the lifecycle method is as follows,

    ```javascript
    static getDerivedStateFromError(error)
    ```

    Let us take error boundary use case with the above lifecycle method for demonstration purpose,

    ```javascript
    class ErrorBoundary extends React.Component {
      constructor(props) {
        super(props);
        this.state = { hasError: false };
      }

      static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI.
        return { hasError: true };
      }

      render() {
        if (this.state.hasError) {
          // You can render any custom fallback UI
          return <h1>Something went wrong.</h1>;
        }

        return this.props.children;
      }
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

66. ### What is the methods order when component re-rendered?

    An update can be caused by changes to props or state. The below methods are called in the following order when a component is being re-rendered.

    1.  static getDerivedStateFromProps()
    2.  shouldComponentUpdate()
    3.  render()
    4.  getSnapshotBeforeUpdate()
    5.  componentDidUpdate()

**[⬆ Back to Top](#table-of-contents)**

67. ### What are the methods invoked during error handling?

    Below methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

    1.  static getDerivedStateFromError()
    2.  componentDidCatch()

**[⬆ Back to Top](#table-of-contents)**

68. ### What is the purpose of unmountComponentAtNode method?

    This method is available from react-dom package and it removes a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns true if a component was unmounted and false if there was no component to unmount.

    The method signature would be as follows,

    ```javascript
    ReactDOM.unmountComponentAtNode(container);
    ```

**[⬆ Back to Top](#table-of-contents)**

69. ### What are the limitations with HOCs?

    Higher-order components come with a few caveats apart from its benefits. Below are the few listed in an order,

    1.  **Don’t use HOCs inside the render method:**
        It is not recommended to apply a HOC to a component within the render method of a component.

        ```javascript
        render() {
          // A new version of EnhancedComponent is created on every render
          // EnhancedComponent1 !== EnhancedComponent2
          const EnhancedComponent = enhance(MyComponent);
          // That causes the entire subtree to unmount/remount each time!
          return <EnhancedComponent />;
        }
        ```

        The above code impacts on performance by remounting a component that causes the state of that component and all of its children to be lost. Instead, apply HOCs outside the component definition so that the resulting component is created only once.

    2.  **Static methods must be copied over:**
        When you apply a HOC to a component the new component does not have any of the static methods of the original component

        ```javascript
        // Define a static method
        WrappedComponent.staticMethod = function () {
          /*...*/
        };
        // Now apply a HOC
        const EnhancedComponent = enhance(WrappedComponent);

        // The enhanced component has no static method
        typeof EnhancedComponent.staticMethod === "undefined"; // true
        ```

        You can overcome this by copying the methods onto the container before returning it,

        ```javascript
        function enhance(WrappedComponent) {
          class Enhance extends React.Component {
            /*...*/
          }
          // Must know exactly which method(s) to copy :(
          Enhance.staticMethod = WrappedComponent.staticMethod;
          return Enhance;
        }
        ```

    3.  **Refs aren’t passed through:**
        For HOCs you need to pass through all props to the wrapped component but this does not work for refs. This is because ref is not really a prop similar to key. In this case you need to use the React.forwardRef API

**[⬆ Back to Top](#table-of-contents)**

70. ### How to debug forwardRefs in DevTools?

    **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,

    ```javascript
    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)”**

    ```javascript
    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,

    ```javascript
    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);
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

71. ### Is it good to use arrow functions in render methods?

    Yes, You can use. It is often the easiest way to pass parameters to callback functions. But you need to optimize the performance while using it.

    ```javascript
    class Foo extends Component {
      handleClick() {
        console.log("Click happened");
      }
      render() {
        return  this.handleClick()}>Click Me;
      }
    }
    ```

    **Note:** Using an arrow function in render method creates a new function each time the component renders, which may have performance implications

**[⬆ Back to Top](#table-of-contents)**

72. ### How do you say that state updates are merged?

    When you call setState() in the component, React merges the object you provide into the current state.

    For example, let us take a facebook user with posts and comments details as state variables,

    ```javascript
      constructor(props) {
        super(props);
        this.state = {
          posts: [],
          comments: []
        };
      }
    ```

    Now you can update them independently with separate `setState()` calls as below,

    ```javascript
     componentDidMount() {
        fetchPosts().then(response => {
          this.setState({
            posts: response.posts
          });
        });

        fetchComments().then(response => {
          this.setState({
            comments: response.comments
          });
        });
      }
    ```

    As mentioned in the above code snippets, `this.setState({comments})` updates only comments variable without modifying or replacing `posts` variable.

**[⬆ Back to Top](#table-of-contents)**

73. ### How do you pass arguments to an event handler?

    During iterations or loops, it is common to pass an extra parameter to an event handler. This can be achieved through arrow functions or bind method.

    Let us take an example of user details updated in a grid,

    ```javascript
     this.updateUser(userId, e)}>Update User details
    Update User details
    ```

    In the both approaches, the synthetic argument `e` is passed as a second argument. You need to pass it explicitly for arrow functions and it will be passed automatically for `bind` method.

**[⬆ Back to Top](#table-of-contents)**

74. ### How to prevent component from rendering?

    You can prevent component from rendering by returning null based on specific condition. This way it can conditionally render component.

    ```javascript
    function Greeting(props) {
      if (!props.loggedIn) {
        return null;
      }

      return welcome, {props.name};
    }
    ```

    ```javascript
    class User extends React.Component {
      constructor(props) {
        super(props);
        this.state = {loggedIn: false, name: 'John'};
      }

      render() {
       return (
           
             //Prevent component render if it is not loggedIn
             <Greeting loggedIn={this.state.loggedIn} />
             
           
       );
      }
    ```

    In the above example, the `greeting` component skips its rendering section by applying condition and returning null value.

**[⬆ Back to Top](#table-of-contents)**

75. ### Give an example on How to use context?

    **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.

    ```javascript
    //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 (
          
            <Toolbar />
          
        );
      }
    }
    // A middle component where you don't need to pass theme prop anymore
    function Toolbar(props) {
      return (
        
          
        
      );
    }
    // Lets read theme value in the button component to use
    class ThemedButton extends React.Component {
      static contextType = ThemeContext;
      render() {
        return ;
      }
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

76. ### How do you use contextType?

    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,

        ```javascript
        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;
        ```

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

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

**[⬆ Back to Top](#table-of-contents)**

77. ### What is a consumer?

    A Consumer is a React component that subscribes to context changes. It requires a function as a child which receives current context value as argument and returns a react node. The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree.

    Lets take a simple example,

    ```javascript
    <MyContext.Consumer>
      {value => /* render something based on the context value */}
    </MyContext.Consumer>
    ```

**[⬆ Back to Top](#table-of-contents)**

78. ### How do you solve performance corner cases while using context?

    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.

    ```javascript
    class App extends React.Component {
      render() {
        return (
          
            <Toolbar />
          
        );
      }
    }
    ```

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

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

      render() {
        return (
          
            <Toolbar />
          
        );
      }
    }
    ```

**[⬆ Back to Top](#table-of-contents)**

79. ### What is the purpose of forward ref in HOCs?

    Refs will not get passed through because ref is not a prop. It is handled differently by React just like **key**. If you add a ref to a HOC, the ref will refer to the outermost container component, not the wrapped component. In this case, you can use Forward Ref API. For example, we can explicitly forward refs to the inner FancyButton component using the React.forwardRef API.

    The below HOC logs all props,

    ```javascript
    function logProps(Component) {
      class LogProps extends React.Component {
        componentDidUpdate(prevProps) {
          console.log("old props:", prevProps);
          console.log("new props:", this.props);
        }

        render() {
          const { forwardedRef, ...rest } = this.props;

          // Assign the custom prop "forwardedRef" as a ref
          return <Component ref={forwardedRef} {...rest} />;
        }
      }

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

    Let's use this HOC to log all props that get passed to our “fancy button” component,

    ```javascript
    class FancyButton extends React.Component {
      focus() {
        // ...
      }

      // ...
    }
    export default logProps(FancyButton);
    ```

    Now let's create a ref and pass it to FancyButton component. In this case, you can set focus to button element.

    ```javascript
    import FancyButton from "./FancyButton";

    const ref = React.createRef();
    ref.current.focus();
    <FancyButton label="Click Me" handleClick={handleClick} ref={ref} />;
    ```

**[⬆ Back to Top](#table-of-contents)**

80. ### Is ref argument available for all functions or class components?
    Regular function or class components don’t receive the ref argument, and ref is not available in props either. The second ref argument only exists when you define a component with React.forwardRef call.

**[⬆ Back to Top](#table-of-contents)**

81. ### Why do you need additional care for component libraries while using forward refs?
    When you start using forwardRef in a component library, you should treat it as a breaking change and release a new major version of your library. This is because your library likely has a different behavior such as what refs get assigned to, and what types are exported. These changes can break apps and other libraries that depend on the old behavior.

**[⬆ Back to Top](#table-of-contents)**

82. ### How to create react class components without ES6?

    If you don’t use ES6 then you may need to use the create-react-class module instead. For default props, you need to define getDefaultProps() as a function on the passed object. Whereas for initial state, you have to provide a separate getInitialState method that returns the initial state.

    ```javascript
    var Greeting = createReactClass({
      getDefaultProps: function () {
        return {
          name: "Jhohn",
        };
      },
      getInitialState: function () {
        return { message: this.props.message };
      },
      handleClick: function () {
        console.log(this.state.message);
      },
      render: function () {
        return <h1>Hello, {this.props.name}</h1>;
      },
    });
    ```

    **Note:** If you use createReactClass then auto binding is available for all methods. i.e, You don't need to use `.bind(this)` with in constructor for event handlers.

**[⬆ Back to Top](#table-of-contents)**

83. ### Is it possible to use react without JSX?

    Yes, JSX is not mandatory for using React. Actually it is convenient when you don’t want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling `React.createElement(component, props, ...children)`.

    For example, let us take a greeting example with JSX,

    ```javascript
    class Greeting extends React.Component {
      render() {
        return Hello {this.props.message};
      }
    }

    ReactDOM.render(
      <Greeting message="World" />,
      document.getElementById("root")
    );
    ```

    You can write the same code without JSX as below,

    ```javascript
    class Greeting extends React.Component {
      render() {
        return React.createElement("div", null, `Hello ${this.props.message}`);
      }
    }

    ReactDOM.render(
      React.createElement(Greeting, { message: "World" }, null),
      document.getElementById("root")
    );
    ```

**[⬆ Back to Top](#table-of-contents)**

84. ### How do you create HOC using render props?

    You can implement most higher-order components (HOC) using a regular component with a render prop. For example, if you would prefer to have a withMouse HOC instead of a <Mouse> component, you could easily create one using a regular <Mouse> with a render prop.

    ```javascript
    function withMouse(Component) {
      return class extends React.Component {
        render() {
          return (
            <Mouse
              render={(mouse) => <Component {...this.props} mouse={mouse} />}
            />
          );
        }
      };
    }
    ```
/* Detailed source-code truncated for AI context efficiency. */
```js
    npx create-react-app my-app --template redux
    ```
    2.  **Typescript template:**
    ```js
    npx create-react-app my-app --template redux-typescript
    ```

**[⬆ Back to Top](#table-of-contents)**

89. ### What is state mutation and how to prevent it?

    `State mutation` happens when you try to update the state of a component without actually using `setState` function. This can happen when you are trying to do some computations using a state variable and unknowingly save the result in the same state variable. This is the main reason why it is advised to return new instances of state variables from the reducers by using Object.assign({}, ...) or spread syntax.

    This can cause unknown issues in the UI as the value of the state variable got updated without telling React to check what all components were being affected from this update and it can cause UI bugs.

    Ex:

    ```javascript
    class A extends React.component {
      constructor(props) {
        super(props);
        this.state = {
          loading: false
        }
     }

    componentDidMount() {
      let { loading } = this.state;
      loading = (() => true)(); // Trying to perform an operation and directly saving in a state variable
    }

    ```

    **How to prevent it:** Make sure your state variables are immutable by either enforcing immutability by using plugins like Immutable.js, always using `setState` to make updates, and returning new instances in reducers when sending updated state values.

**[⬆ Back to Top](#table-of-contents)**

90. ### What are React Mixins?

    **⚠️ DEPRECATED:** Mixins are considered legacy and should not be used in modern React applications.

    _Mixins_ were a way to share common functionality between components using `React.createClass()`. However, they caused several problems:
    - Implicit dependencies
    - Name clashes
    - Snowballing complexity

    One of the most commonly used mixins was `PureRenderMixin`:

    ```javascript
    const PureRenderMixin = require("react-addons-pure-render-mixin");

    const Button = React.createClass({
      mixins: [PureRenderMixin],
      // ...
    });
    ```

    **Modern Alternatives:**
    - **React.memo()** for functional components (replaces PureRenderMixin)
    - **Custom Hooks** for sharing stateful logic
    - **Higher-Order Components (HOCs)** for cross-cutting concerns
    - **Render Props** pattern

    ```javascript
    // Modern equivalent using React.memo
    const Button = React.memo(({ onClick, label }) => (
      {label}
    ));
    ```

    **[⬆ Back to Top](#table-of-contents)**

91. ### Can I use javascript urls in react16.9?

     **⚠️ DEPRECATED:** As of React 19, `javascript:` URLs are no longer supported and may throw errors.

     In React 16.9, `javascript:` URLs would log a warning in the console because URLs starting with `javascript:` are dangerous security vulnerabilities (XSS attacks).

     ```javascript
     const companyProfile = {
       website: "javascript: alert('Your website is hacked')",
     };
     // This logged a warning in React 16.9
     // Now blocked or throws error in modern React
     <a href={companyProfile.website}>More details</a>;
     ```

     **Modern Best Practice:**
     - Never use `javascript:` URLs
     - Use proper event handlers instead:
     
     ```javascript
     const handleClick = (e) => {
       e.preventDefault();
       // Your logic here
     };
     
     [More details](#)
     // Or better:
     More details
     ```

**[⬆ Back to Top](#table-of-contents)**

## Disclaimer

The questions provided in this repository are the summary of frequently asked questions across numerous companies. We cannot guarantee that these questions will actually be asked during your interview process, nor should you focus on memorizing all of them. The primary purpose is for you to get a sense of what some companies might ask — do not get discouraged if you don't know the answer to all of them ⁠— that is ok!

Good luck with your interview 😊

---

---

### Overview (`coding-exercise/README.md`)

### Coding Exercise

#### 1. What is the output of below code

```javascript
import { useState } from 'react';

export default function Counter() {
  const [counter, setCounter] = useState(5);

  return (
    <>
      {counter}
       {
        setCounter(counter + 5);
        setCounter(counter + 5);
        alert(counter);
        setCounter(counter + 5);
        setCounter(counter + 5);
      }}>Increment
    </>
  )
}

import { useState } from 'react';

export default function Counter() {
  const [counter, setCounter] = useState(5);

  return (
    <>
      {counter}
       {
        setCounter(counter => counter + 5);
        setCounter(counter => counter + 5);
        alert(counter);
        setCounter(counter => counter + 5);
        setCounter(counter => counter + 5);
      }}>Increment
    </>
  )
}

import { useRef } from 'react';

export default function Counter() {
  let countRef = useRef(0);

  function handleIncrement() {
    countRef.current = countRef.current + 1;
  }

  return (
    <>
      Count: {countRef.current}
      
        Click me
      
    </>
  )
}

import { useRef } from 'react';

function MyCustomInput(props) {
  return ;
}

export default function MyCustomForm() {
  const inputRef = useRef(null);

  function handleInputFocus() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyCustomInput ref={inputRef} />
      
        Click Me
      
    </>
  );
}

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
  }

  return (
    <>
      Clicked {ref.current} times
      
        Click me!
      
    </>
  );
}

import { useEffect, useState } from 'react';

export default function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect ran');
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    console.log('Cleanup registered');
    return () => {
      console.log('Cleanup executed');
      clearInterval(timer);
    };
  }, []);

  return Count: {count};
}

import { useState } from 'react';

export default function App() {
  const [items, setItems] = useState([1, 2, 3]);

  function handleClick() {
    items.push(4);
    setItems(items);
  }

  return (
    <>
      Items: {items.join(', ')}
      Add Item
    </>
  );
}

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    setCount(1);
  });

  useEffect(() => {
    setCount(2);
  }, []);

  console.log('Rendered with count:', count);

  return Count: {count};
}

import { useMemo } from 'react';

export default function App() {
  const expensiveCalculation = useMemo(() => {
    console.log('Calculating...');
    return 100 + 200;
  });

  return Result: {expensiveCalculation};
}

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    name: 'John',
    a