Question 1

What are the benefits of using TypeScript with React?

Accepted Answer

TypeScript with React:
- Adds static typing for props, state, and hooks, reducing runtime errors.
- Improves code maintainability and IDE support (e.g., autocompletion).
- Catches errors early during development.

Question 2

What is the significance of React.memo?

Accepted Answer

React.memo:
- Memoizes a functional component to prevent re-renders if props don’t change.
- Compares props shallowly by default.
- Improves performance in scenarios with frequent parent re-renders.

Question 3

What is the role of keys in React’s diffing algorithm?

Accepted Answer

Keys in the diffing algorithm:
- Help React identify which elements have changed, been added, or removed.
- Enable efficient updates by reusing existing DOM nodes.
- Must be unique and stable to avoid rendering issues.

Question 4

How do you prevent a component from re-rendering?

Accepted Answer

To prevent re-renders:
- **React.memo**: Memoizes functional components based on props.
- **useMemo**: Memoizes expensive computations.
- **useCallback**: Memoizes functions.
- Ensure props and state changes are minimized or stable.

Question 5

How do you optimize re-renders in a list of components?

Accepted Answer

To optimize list re-renders:
- Use `React.memo` to prevent unnecessary re-renders of list items.
- Ensure stable, unique `key` props for efficient diffing.
- Avoid passing new object references as props unless necessary.

Question 6

What is the purpose of the useId Hook in React 18?

Accepted Answer

The `useId` Hook:
- Generates a unique ID for accessibility purposes in React 18.
- Ensures consistent IDs across server and client rendering.
- Useful for associating labels with inputs or other ARIA attributes.

Question 7

How do you handle cleanup in useEffect?

Accepted Answer

Cleanup in `useEffect`:
- Achieved by returning a function from the effect.
- Runs before the next effect or on unmount.
- Used to cancel subscriptions, clear timers, or remove event listeners to prevent memory leaks.

Question 8

What are Pure Components in React?

Accepted Answer

Pure Components:
- Are class components that implement `shouldComponentUpdate` with a shallow prop/state comparison.
- Prevent re-renders if props and state haven’t changed.
- Replaced by `React.memo` in functional components.

Question 9

What are custom Hooks and how do you create one?

Accepted Answer

Custom Hooks:
- Are reusable functions that encapsulate Hook logic.
- Start with `use` (e.g., `useCustomHook`) and can call other Hooks.
- Useful for sharing stateful logic across components.

Question 10

Why would you use useEffect in a React component?

Accepted Answer

The `useEffect` Hook is used for side effects in functional components, such as:
- Fetching data from an API.
- Subscribing to events or updating the DOM.
- It runs after every render by default but can be controlled with a dependency array.
- Cleans up effects (e.g., unsubscribing) using a return function.

DeVlt

Medium React Interview Questions

Unlock All Interview Questions

Why Practice Medium React Questions?

DeVlt