React Interview Questions: Scenario-Based Questions

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 working counter component with buttons to increment, decrement, and reset the count.

Hint: Define a reducer function with action types and update state accordingly.

Optimize a React List Component

Given a list rendering component, optimize it to prevent unnecessary re-renders when unrelated state changes.

Expected output: The list component only re-renders when its props change.

Hint: Use React.memo and memoize callback functions passed as props.

For complex state, I would use the useReducer hook to manage state transitions clearly. It helps organize state updates and makes the logic easier to maintain compared to multiple useState calls.

I would use React.memo to memoize the component, and useCallback or useMemo hooks to memoize functions and values passed as props. This prevents re-renders when props or state haven't changed.

I use useEffect to perform side effects like data fetching or subscriptions. I carefully specify dependencies to control when the effect runs and include cleanup functions to avoid memory leaks.