10 Important React Hooks Interview Questions with Answers | PDF

React Hooks Interview Questions: Hooks in react is very important for every React Js interview, In this article we have shared10 Important React Hooks Interview Questions with Answers.

1- What are React hooks?

Hooks is a special function (introduced as a new feature in React 16.8) that lets you use state and other React features without writing a class.

• Hooks solve a wide variety of seemingly unconnected problems in React that we’ve encountered over years of writing and maintaining tens of thousands of components.
• Whether you’re learning React, use it daily, or even prefer a different library with a similar component model, you might recognise some of these problems.

Example:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2- Can Hooks cover all use cases of 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 lifecycles yet.

• getSnapshotBeforeUpdate 

• componentDidCatch 
  

3- What is useState Hook show with example?

The React useState Hook allows us to track state in a function component.

State generally refers to data or properties that need to be tracking in an application.

use state hook return an array with two elements

• Current State
• State Setter function

Example:

import React, { useState } from "react";

function HookCounterTwo() {
const initialCount = 0;

const [count, setCount] = useState(initialCount);

const incrementByFive = () => {
for (let i = 0; i < 5; i++) { setCount((prevCount) => prevCount + 1); }
};
return (

<div>
<h1>{count}</h1>
<button onClick={() => setCount(initialCount)}>Reset Count</button> <button onClick={() => setCount(count + 1)}> increment count</button> <button onClick={() => setCount(count - 1)}> Decrement count</button> <button onClick={incrementByFive}>Increment by Five</button>
</div>
);
}

export default HookCounterTwo;

//React Hooks Interview Questions

Example shows use case of useState hooks using counter in ReactJs,

• Button to reset the count
• Button to Increase the count
• Button to Decrease the count

4- What is useEffect Hook show with example?

useEffect lets us express different kinds of side effects after a component renders.

Some examples of side effects are: fetching data, directly updating the DOM, and timers.

Example:

import React, { useState, useEffect } from "react";

function HookCounterTwo() {
const [count, setCount] = useState(0); const [name, setName] = useState("");
useEffect(() => {
console.log("useEffect- updating document tittle"); document.title = `you have clicked ${count}`;
}, [count]);

return (
<div>
<h1>{count}</h1>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button onClick={() => setCount(count + 1)}>inc Count</button> </div>
);
}

export default HookCounterTwo;

//React Hooks Interview Questions

5- What is useContextHook show use with example?

It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.

Problem:

import { useState } from "react";
import ReactDOM from "react-dom/client"; function Component1()
{const [user, setUser] = useState("Jesse Hall");

 return (
<>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</>);}
function Component2({ user })
{return (
<>
<h1>Component 2</h1>
<Component3 user={user} />
</>
);}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} >
</>);}
function Component4({ user }) {return (
<>
<h1>Component 4</h1>
<Component5 user={user} />

</>);}function Component5({ user }) {return (<> <h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>);}

//React Hooks Interview Questions

Solution using useContext:

const UserContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");

return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}
</h1>
<Component2 /> 
</UserContext.Provider>
); }
function Component2() { return (
<>

<h1>Component 2</h1> <Component3 />
</> );
}
function Component3() { return (
<>

<h1>Component 3</h1> <Component4 />
</> );
}
function Component4() { return (
<>
<h1>Component 4</h1> <Component5 />
</> );

//React Hooks Interview Questions

6- What is useReducerHook show use with example?

The useReducer Hook is similar to the useState Hook. It allows for custom state logic. If you find yourself keeping track of multiple pieces of state that rely on complex logic, useReducer may be useful.

• used for sate management
• Alternative of useState
• usestate is built using usereducer
• useReducer(reducer, initialState)

Example:

import React, { useReducer, useState } from "react";
const initState = 0;


const reducer = (state, act) => { switch (act) {

case "increment":
return state + 1;
case "decrement": return state - 1; 
case "reset": 
return initState;
default:
return state;
} };
function RedCounter() {
const [count, dispatch] = useReducer(reducer, initState);
return (
<div>
<div>{count}</div>
<button onClick={() => dispatch("increment")}> Increment {count}</button> <button onClick={() => dispatch("decrement")}> decrement {count}</button> <button onClick={() => dispatch("reset")}> reset {count}</button>
</div>
);
}
export default RedCounter;

//React Hooks Interview Questions
 

7- What is useMemoHook show use with example?

• The React useMemo Hook returns a memoized value.
• The useMemo Hook only runs when one of its dependencies update.
• This can improve performance

Example:

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

function CounterMemo() {
const [counteOne, setCounterOne] = useState(0);
 const [counteTwo, setCounterTwo] = useState(0);
const incrementOne = () => { 
setCounterOne(counteOne + 1);
};
const incrementTwo = () => {
setCounterTwo(counteTwo + 1); };
const isEven = useMemo(() => {
let i = 0;
let j = 0;
while (i < 9000 && j < 9000022) i = j++; return counteOne % 2 === 0;
}, [counteOne]);
return ( <div>
<button onClick={incrementOne}>Increment one{counteOne}</button> <br />
<span>{isEven ? "even" : "odd"}</span>
<br />
<button onClick={incrementTwo}>Increment two{counteTwo}</button> </div>
 ); }

export default CounterMemo;

//React Hooks Interview Questions

8- What is useCallback Hook?

Motivation tree

• The React useCallback Hook returns a memoized callback function.
• This allows us to isolate resource intensive functions so that they will not automatically run on every render.
• The useCallback Hook only runs when one of its dependencies update.

Example:

const addTodo = useCallback(() => {
 setTodos((t) => [...t, "New Todo"]);
}, [todos]);

9- What isuseRefHook?

Motivation tree

• The useRef Hook allows you to persist values between renders.
• It can be used to store a mutable value that does not cause a re-render when updated.
• It can be used to access a DOM element directly.
• The useRef Hook can also be used to keep track of previous state values.

Example:

import { useRef } from "react";
import ReactDOM from "react-dom/client";

 function App() {
const inputElement = useRef();
const focusInput = () => { inputElement.current.focus();
};
return ( <>

Use useRef to focus the input:
<input type="text" ref={inputElement} />

<button onClick={focusInput}>Focus Input</button> </>
); }

//React Hooks Interview Questions

10- What is the difference between useState and useRef hook?

UseState	UseRef
Updating a reference using useRefdoesn’t trigger component re-rendering	useRef doesn’t cause a component to re-render when the value or state changes
useState allows us to update the state inside components.	useRef allows refrencing DOM elements.

Download PDF of Important React Hooks Interview Questions with Answers

If you want to download PDF format of these Question we would really appreciate if you will give us credits while sharing, Thank you 😇

Share your interview Experience with us: Click Here