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

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

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

index.js

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

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

App.js

  const authContext = useContext(AuthContext);

  const { loadUser } = authContext;

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

loadUser

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

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

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

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

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

327. How does 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:

     import React from 'react';
     
     function App() {
       return <h1>Good morning!!</h1>;
     }
     

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

     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

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

     Under the hood JSX transform compiles to below code

     import {jsx as _jsx} from 'react/jsx-runtime';
     
     function App() {
       return _jsx('h1', { children: 'Good morning!!' });
     }
     

     Note: You still need to import React to use Hooks.

328. How do you get redux scaffolding using create-react-app?

     Redux team has provided official redux+js or redux+typescript templates for create-react-app project. The generated project setup includes,

     1. Redux Toolkit and React-Redux dependencies
     2. Create and configure Redux store
     3. React-Redux <Provider> passing the store to React components
     4. Small "counter" example to demo how to add redux logic and React-Redux hooks API to interact with the store from components

     The below commands need to be executed along with template option as below,

     1. Javascript template:

     npx create-react-app my-app --template redux
     

     2. Typescript template:

     npx create-react-app my-app --template redux-typescript
     

329. What are React Server components?

     React Server Component is a way to write React component that gets rendered in the server-side with the purpose of improving React app performance. These components allow us to load components from the backend.

     Note: React Server Components is still under development and not recommended for production yet.

330. What is prop drilling?

     Prop Drilling is the process by which you pass data from one component of the React Component tree to another by going through other components that do not need the data but only help in passing it around.

331. What are the different ways to prevent state mutation?