Top 5 React Interview Questions in 2022

0

These days, the term “react” is used a lot in business. When it comes to front-end development, ReactJS is the most popular choice, and this lesson on how to answer ReactJS interview questions will help you land the job.

Below are the most frequently asked ReactJS interview questions, from the most basic to the most complicated.

Five frequently asked React interview questions are presented here:

1. Instead of Angular, why not use React instead

2. What are redux thunks used for?

Using Redux thunk you can create action creators that return functions instead of actions. An action can be delayed until a given condition is met using the delay function. You can pass both getState and dispatch storage methods to the inner function.

You must use the applyMiddleware() method first. This can be seen in the code below:

import{ createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(
  rootReducer,
  applyMiddleware(thunk) 
);

3. What does useState() do in React?

The useState() React Hook allows using state variables in functional components. This approach is great for dynamically manipulating/controlling the DOM.

SetCounter method is the second parameter of UseState(0)which returns a tuple with count as the first argument and the setCounter method as the second.

..
const [count, setCounter] = useState(0);
const [otherStuffs, setOtherStuffs] = useState(..); ..
const setCount = () => {
  setCounter(count + 1); 
  setOtherStuffs(..);
  ..
};

To update the count, use the setCounter() method at any location. In this example, SetCounter() is used in the setCount method, where a variety of different actions can be taken. When we use hooks, we can make our code more useful and avoid the need for class-based components if they aren’t absolutely essential.

4. Is the useEffect hook useful?

The useEffect React Hook can be used to generate side effects in functional components. You can use useEffect to let React know that your component needs something to happen after it renders or after a state change.

React will remember and run the function you gave it as soon as the DOM update is complete (also known as an “effect”). Besides updating the page title, this function can also be used to get data from the web server.

The useEffect hook is automatically activated after the first rendering of the component and each subsequent update. When complete, the DOM will have been modified.

Hooks for React. It is possible to useEffect with two arguments:

useEffect(callback[, dependencies]);

Callback 1 represents the function containing the side effect logic, which is called immediately after the DOM changes are applied. The second parameter’s dependency array can be whatever you want it to be. useEffect() will be invoked as long as dependencies between renders change.

import { useEffect } from 'react'; 
function WelcomeGreetings({ name }) {
  const msg = `Hi, ${name}!`; 
  useEffect(() => {
    document.title = `Welcome to you ${name}`; 
  }, [name]);
  return 
{msg}
; }

A side effect is anything that happens as a result of the preceding code but is not directly responsible for it. Therefore, useEffect now contains a callback for updating document titles().

You may need to specify name as effect dependency for useEffect if you want to avoid document title change on WelcomeGreetings component layout every time useEffect(callback, [name])

5. Describe some techniques to speed up a React application

Taking a look at some strategies for speeding up a React project is a good place to start.

  • Using the useMemo() function
    • This React hook can be used to cache CPU-intensive tasks.

    • For some React applications, continued use of CPU-intensive functions may result in

      in delayed rendering when a component is re-rendered. The useMemo() hook can be used to cache these procedures. Only when absolutely essential should the CPU-intensive method useMemo() to be used.

  • Maintain a cooperative state
    • You want to get the state as close to the desired location as possible.

    • The parent component of React apps can include a lot of redundant state, which makes it more difficult to understand and maintain the code. When there is

      many states in a single component, everything is rendered.

    • It’s best to separate states that aren’t critical to the parent component.

  • Let’s get rid of slow loading.
    • Speed ​​up the startup of a React application using this technique. Lazy loading minimizes the risk of web application performance issues.

LOADING
. . . comments & After!

Share.

Comments are closed.