React Interview Questions: Real Interview Examples

Implement a Controlled Input Component

Create a React component with an input field that updates its value using state and displays the current input below.

Expected output: An input box that updates and displays its value as you type.

Hint: Use useState to manage the input value and onChange to update it.

Optimize a React Component

Given a functional component that re-renders unnecessarily, apply React.memo and useCallback to optimize it.

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

Hint: Identify props that cause re-renders and memoize functions passed as props.

State is a component's internal data that can change over time, while props are read-only inputs passed from parent to child components.

You can prevent unnecessary re-renders by using React.memo for functional components, useMemo and useCallback hooks to memoize values and functions, and by avoiding anonymous functions in props.

Keys help React identify which items have changed, are added, or removed, improving rendering performance and avoiding UI bugs.