React Interview Questions - Intermediate Level

Implement a Counter with useReducer

Create a React component that uses useReducer to manage a counter with increment, decrement, and reset actions.

Expected output: A counter UI that updates correctly on button clicks.

Hint: Define a reducer function with action types and use useReducer hook in your component.

Optimize a Component with React.memo

Wrap a functional component with React.memo and demonstrate that it prevents re-rendering when props do not change.

Expected output: Component only re-renders when props change.

Hint: Use console logs inside the component to verify renders.

useEffect lets you perform side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM. It runs after render and can be controlled with dependencies.

useReducer is preferred when state logic is complex or involves multiple sub-values and actions, as it centralizes state updates and makes them more predictable.

React.memo memoizes a functional component, preventing it from re-rendering if its props have not changed, reducing unnecessary rendering.

Common pitfalls include missing dependency arrays causing infinite loops, not cleaning up subscriptions leading to memory leaks, and running effects unnecessarily.