React

Question 1

What is the purpose of React’s useEffect hook, and how does dependency array management affect performance and behavior?

Answer 1

useEffect is used for handling side effects in functional components (e.g., data fetching, subscriptions, timers).
The dependency array controls when the effect runs:
Empty array []: Effect runs once on mount.
No array: Effect runs on every render.
With dependencies: Effect runs only when the dependencies change.
Performance impact: Proper dependency management prevents unnecessary re-renders and side effects, ensuring efficient updates.

Question 2

How would you implement a custom hook to fetch data from an API and handle loading, error, and success states?

Answer 2

import { useState, useEffect } from “react”;

function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
setLoading(true);
fetch(url)
.then((response) => response.json())
.then((data) => {
setData(data);
setLoading(false);
})
.catch((error) => {
setError(error);
setLoading(false);
});
}, [url]);

return { data, loading, error };
}
This hook fetches data and manages loading and error states, providing a clean way to reuse the logic across components.

Question 3

Can you explain the concept of “reconciliation” in React and how React optimizes re-rendering?

Answer 3

Reconciliation is the process React uses to update the DOM efficiently. React uses a virtual DOM, which is an in-memory representation of the real DOM.
When state or props change, React compares the virtual DOM with a previous version using a diffing algorithm and only applies the minimal number of updates to the real DOM to reflect the changes.
This process minimizes costly operations and improves performance, especially in complex UIs.

Question 4

What is the difference between controlled and uncontrolled components in React?

Answer 4

Controlled components: The form input’s value is controlled by React state (the source of truth).

function App() {
const [value, setValue] = useState(“”);
return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}
Uncontrolled components: The DOM maintains the input’s state, and refs are used to access values.
function App() {
const inputRef = useRef(null);
return <input ref={inputRef} />;
}

Question 5

How do you use React.memo() to optimize performance, and what are the trade-offs?

Answer 5

React.memo() is a higher-order component that memoizes the result of a component’s render, preventing it from re-rendering unless its props change.
const MyComponent = React.memo((props) => {
return <div>{props.value}</div>;
});

Question 6

useState

Answer 6

Manages local state in a functional component.
import { useState } from ‘react’;

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

Question 7

useEffect

Answer 7

Handles side effects (like data fetching, subscriptions, or manually updating the DOM) in a functional component.

Question 8

useRef

Answer 8

Creates a mutable reference that persists across renders. Commonly used for accessing DOM elements or storing mutable values.

import { useRef, useEffect } from ‘react’;

function FocusInput() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus(); // Focus the input field when the component mounts
}, []);

return <input ref={inputRef} placeholder=”Focus me on render” />;
}

Question 9

useReducer

Answer 9

Manages more complex state logic than useState, similar to Redux reducer patterns.

Question 10

useMemo

Answer 10

useMemo is a React Hook that lets you cache the result of a calculation between re-renders.