Top 46 React Hooks Interview Questions And Answers

Question 1

What are React Hooks?

Accepted Answer

**Hooks** are a new addition in React 16.8. They let you use state and other React features without writing a class. With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.

Question 2

What are advantages of using React Hooks?

Accepted Answer

Primarily, hooks in general enable the extraction and reuse of stateful logic that is common across multiple components without the burden of higher order components or render props. Hooks allow to easily manipulate the state of our functional component without needing to convert them into class components.

Hooks don’t work inside classes (because they let you use React without classes). By using them, we can totally avoid using lifecycle methods, such as `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`. Instead, we will use built-in hooks like `useEffect` .

Question 3

Provide an example of any simple _Custom_ React Hook. Why do we need Custom Hooks?

Accepted Answer

A **Custom** Hook is a **stateful function** that uses other react built-in hooks (e.g. `useState`, `useCallback` etc.) that can wrap around the _stateful_ logic that you wanted to gather in one place and _avoid copying and pasting the same logic_ in multiple components. Consider the increment/decriment custom hook: ```jsx const useCounter = () => { const [counter, setCounter] = useState(0); return { counter, // counter value increment: () => setCounter(counter + 1), // function 1 decrement: () => setCounter(counter - 1) // function 2 }; }; ``` and then in your component you can use it as follows: ```jsx const Component = () => { const { counter, increment, decrement } = useCounter(); return (

- {counter} +

); } ```

Question 4

How to access DOM elements in React?

Accepted Answer

One of the useful application of the `useRef()` hook is to access DOM elements. This is performed in 3 steps: 1. Define the reference to access the element `const elementRef = useRef()`; 2. Assign the reference to `ref` attribute of the element: `

`; 3. After mounting, `elementRef.current` points to the DOM element. Consider: ```jsx import { useRef, useEffect } from 'react'; function AccessingElement() { const elementRef = useRef(); useEffect(() => { const divElement = elementRef.current; console.log(divElement); // logs

I'm an element

}, []); return (

I'm an element

); } ```

Question 5

How to call loading function with React `useEffect` only once?

Accepted Answer

If you only want to run the function given to `useEffect` after the _initial render_, you can give it an _empty array_ `[]` as the second argument. For example: ```jsx function MyComponent(){ useEffect(() => { loadDataOnlyOnce(); }, []); return

{ /*...*/}

; } ```

Question 6

What is `useState()` in React?

Accepted Answer

`useState` is one of build-in react hooks. `useState(0)` returns a tuple where the first parameter count is the current state of the counter and setCounter is the method that will allow us to update the counter's state.

We can use the `setCounter` method to update the state of count anywhere - In this case we are using it inside of the setCount function where we can do more things; the idea with hooks is that we are able to keep our code more functional and avoid class based components if not desired/needed.

Question 7

Can you initialise _state_ from a function? Provide and example

Accepted Answer

**Yes**! Consider: ```jsx const StateFromFn = () => { const [token] = useState(() => { let token = window.localStorage.getItem("my-token"); return token || "default#-token#" }) return

Token is {token}

} ```

Question 8

Does React `useState` Hook update _immediately_?

Accepted Answer

React `useState` and `setState` don’t make changes directly to the state object; they create queues to optimize performance, which is why the changes don’t update immediately. The process to update React state is asynchronous for performance reasons.

To perform side effects after state has change, you must use the `useEffect`

Question 9

What does _Batching_ mean in ReactJS?

Accepted Answer

**Batching** is nothing but **grouping React multiple state updates together into a single render state** to achieve better computational performance. Until React 18, we only _batched_ updates during the _React event handlers_. Updates inside of `promises`, `setTimeout`, _native event handlers_, or any other event were not _batched_ in React by default. ```jsx function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount(c => c+1); // Does not re-render yet setFlag(f => !f); // Does not re-render yet // React will only re-render once at the end (that's batching!) } return (

{count}

) } ```

Question 10

How to use `componentWillMount()` in React Hooks?

Accepted Answer

You cannot use any of the existing lifecycle methods (`componentDidMount`, `componentDidUpdate`, `componentWillUnmount` etc.) in a hook. They can only be used in class components. And with Hooks you can only use in functional components.

You can think of `useEffect` Hook as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` combined.

1. Code inside **`componentDidMount`** run once when the component is mounted. `useEffect` hook equivalent for this behaviour is

```js
useEffect(() => {
  // Your code here
}, []);
 ```

2. Without the second parameter the `useEffect` hook will be called on every render (like `componentDidUpdate`) of the component which can be dangerous:

```js
useEffect(() => {
  // Your code here
});
 ```

3.  Hook equivalent of `componentWillUnmount()` code will be as follows

```js
useEffect(() => {
  window.addEventListener('mousemove', () => {});

// returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])
 ```

Top 46 React Hooks Interview Questions

What are React Hooks?

What are advantages of using React Hooks?

How to call loading function with React useEffect only once?

How to access DOM elements in React?

What is useState() in React?

What are production use cases for the useRef?

What does Batching mean in ReactJS?

What are common use cases for the useMemo?

Which lifecycle methods of class component is replaced by useEffect in functional component?

Compare React Context Api with useContext React hook

When would you use useContext hook?

Is there any problem when using useContext Hook?

Compare useState and useReducer implementations

Do React Hooks cover all use cases for class components?

How can I make use of Error Boundaries in functional React components?

What are differences between React.memo() and useMemo()?

What are the advantages of Batching in ReactJS?

Explain the difference between useState and useRef hooks?

When would you use useRef?

Does React useState Hook update immediately?

When writing a Custom Hook, what is the difference between it and a normal function?

Do two components using the same Hook share state?

How to use componentWillMount() in React Hooks?

When shall we use useReducer hook in ReactJS?

Explain the use of useLayoutEffect React Hook

Are there any problems using useCallback?

How would you store non-state/instance variables in functional React components?

Is there a React hook equivalent to componentDidCatch?

When to use useState vs useReducer?

When would you use flushSync in ReactJS?

When to use useCallback, useMemo and useEffect?

How do I update state on a nested object with useState()?

Explain why and when would you use useMemo()?

What's the difference between useCallback and useMemo in practice?

Do Hooks replace render props and higher-order components (HOC)?

How can I force component to re-render with Hooks in React?

Can a custom React hook return JSX?

When would you want to avoid useEffect and use useLayoutEffect instead?

Provide an example of any simple Custom React Hook. Why do we need Custom Hooks?

Can you initialise state from a function? Provide and example

What is equivalent of this code using React Hooks?

Provide a good example of using useCallback hook in React

How to mitigate multiple component re-renders when using multiple useState calls?

How would you optimise this code using one of the React Hooks?

Can we mimic componentWillMount() using React Hooks?

Explain the difference between useMemo vs useEffect + useState usage in that code

How to call loading function with React `useEffect` only once?

What is `useState()` in React?

What are production use cases for the `useRef`?

What are common use cases for the `useMemo`?

Which lifecycle methods of class component is replaced by `useEffect` in functional component?

Compare React `Context Api` with `useContext` React hook

When would you use `useContext` hook?

Is there any problem when using `useContext` Hook?

Compare `useState` and `useReducer` implementations

Do React `Hooks` cover all use cases for class components?

What are differences between `React.memo()` and `useMemo()`?

Explain the difference between `useState` and `useRef` hooks?

When would you use `useRef`?

Does React `useState` Hook update immediately?

How to use `componentWillMount()` in React Hooks?

When shall we use `useReducer` hook in ReactJS?

Explain the use of `useLayoutEffect` React Hook

Are there any problems using `useCallback`?

Is there a React hook equivalent to `componentDidCatch`?

When to use `useState` vs `useReducer`?

When would you use `flushSync` in ReactJS?

When to use `useCallback`, `useMemo` and `useEffect`?

How do I update state on a nested object with `useState()`?

Explain why and when would you use `useMemo()`?

What's the difference between `useCallback` and `useMemo` in practice?

When would you want to avoid `useEffect` and use `useLayoutEffect` instead?

Provide a good example of using `useCallback` hook in React

How to mitigate multiple component re-renders when using multiple `useState` calls?

Can we mimic `componentWillMount()` using React Hooks?

Explain the difference between `useMemo` vs `useEffect` + `useState` usage in that code