React Interview Questions

Answer

React solves: managing complex UI state, reusing components across applications, efficient DOM updates through Virtual DOM diffing. It enables building scalable, maintainable applications.

Answer

React is a JavaScript library for building user interfaces with components. Component-based architecture breaks UI into reusable pieces. Each component manages its own state and props. Components compose together to build applications. React ecosystem includes: React Router for navigation, Redux or Context for state management, testing libraries like Jest and React Testing Library, build tools like Webpack or Vite. React is maintained by Meta and community. Huge ecosystem enables building complex applications.

Answer

I created a counter component with useState. Initial state 0. Button onClick handler calls setCount with count plus 1. Each update triggers re-render, displaying new count. Used useCallback to memoize handler to prevent unnecessary re-renders if component received other prop changes.

Answer

function Counter() { const count, setCount useState 0; return div button onClick={() setCount(count + 1)} Increment /button button onClick={() setCount(count - 1)} Decrement /button p Count: {count} /p /div }

Answer

JSX looks like HTML but is JavaScript. Babel transforms JSX to React.createElement. Enables readable UI code. JavaScript expressions wrapped in braces.

Answer

JSX is syntactic sugar. Babel transpiler converts JSX to React.createElement calls. Example: div className hello transforms to React.createElement div classNamehello null children. JavaScript expressions in braces are evaluated. Attributes become props. Children become additional arguments. Understanding transformation helps debug and use JSX effectively. JSX is not valid JavaScript alone; requires build step.

Answer

Parent component had toggle state. Two sibling child components needed to coordinate: only one could be expanded. I lifted toggle state to parent. Parent passed state and setState via props to children. Children now communicate through parent callbacks. This made components independent and reusable.

Answer

function Form() { const email, setEmail useState ''; const handleSubmit (e) => { e.preventDefault; if valid email setEmail ''; } return form onSubmit={handleSubmit} input value={email} onChange={(e) setEmail(e.target.value)} /form }

Answer

Functional components are functions returning JSX. Class components extend React.Component. Modern React prefers functional components with hooks. Both are equivalent in capability.

Answer

Functional components are JavaScript functions returning JSX. Simple, testable, lightweight. Class components extend React.Component, use this.state and lifecycle methods. More verbose. Modern React prefers functional components with hooks because they are cleaner, smaller bundle size, easier to compose and test. Hooks provide equivalent capabilities to class features. New projects should use functional components. Class components still work but are legacy.

Answer

I used useEffect with empty dependency array to fetch on mount. API call inside effect returns data. useState stored fetched data. useEffect cleanup function cancelled requests on unmount preventing memory leaks. Added error handling and loading state. Dependency array with id parameter fetched when id changed.

Answer

function DataFetch() { const data, setData useState null; const loading, setLoading useState true; useEffect(() => { fetch url .then(res => res.json()) .then(data => setData data) .catch(err => setError err) .finally(() => setLoading false); }, []); return loading p Loading /p : error p Error /p : data div ... /div }

Answer

React compares old and new Virtual DOM tree. Identifies minimal changes needed. Batches updates for efficiency. Reduces reflows and repaints. Dramatically faster than updating entire DOM.

Answer

React maintains Virtual DOM in memory. After state change, creates new Virtual DOM tree. Diffing algorithm compares old and new trees, identifies changes. Reconciliation applies minimal DOM updates. Batches multiple updates together. This avoids expensive reflows and repaints. Direct DOM manipulation requires updating entire sections; React updates only changed elements. Dramatically improves performance on complex applications.

Answer

React DevTools Profiler showed components re-rendering unnecessarily. I added React.memo to prevent re-renders when props didn't change. useCallback memoized functions passed as props. useMemo memoized computed values. Identified that Parent re-renders triggered all children re-renders. Optimizations reduced re-renders significantly.

Answer

function List() { const items = itemsArray; return ul {items.map(item => li key={item.id} onClick={() handleClick item.id {item.name} /li)} /ul }

Answer

Props are read-only data passed from parent to child. State is mutable data managed by component. State changes via setState trigger re-renders. Props changes also trigger child re-renders.

Answer

Unidirectional flow: data flows down from parent to child via props. Children cannot directly modify parent state; they call parent callback functions. This predictability aids debugging. Prop drilling: passing props through multiple intermediate components. Solved with Context API or composition. Composition over inheritance: build components by combining smaller components rather than extending base classes. More flexible, reusable, maintainable.

Answer

I used controlled components: input value from state, onChange handler updates state. Select with value and onChange. Checkbox with checked and onChange. Form submit handler validates and submits. All form state managed in React, making validation and submission predictable.

Answer

function Status() { const isLoggedIn, setIsLoggedIn useState false; return isLoggedIn ? p Welcome back /p : p Please log in /p }

Answer

const state, setState = useState initialValue. Setter setState updates state and triggers re-render. Multiple useState calls allowed. Hooks enable replacing class state with cleaner functional syntax.

Answer

useState returns array: state value and setState function. setState updates state and queues re-render. setState can take value or function for previous state. State updates are asynchronous. Multiple setState calls batch together. Closures capture current state; stale state can occur without proper dependencies. Common patterns: toggles with boolean, form state with object, arrays with spread operator or hooks like useReducer for complex state.

Answer

I created ThemeContext with createContext. ThemeProvider component managed theme state. useContext theme hook in consumers accessed current theme. Toggle button changed theme. CSS applied different styles based on theme. Context avoided prop drilling through many components.

Answer

function useFormInput initialValue { const value, setValue useState initialValue; return { value, onChange: (e) => setValue e.target.value } }

Answer

useEffect runs after component renders. Dependency array controls execution: empty runs once, omitted runs every render, with dependencies runs when dependencies change. Cleanup function handles unmounting.

Answer

Side effects are operations outside pure rendering: API calls, subscriptions, timers, DOM manipulation. useEffect runs after render. Return function from useEffect is cleanup, runs before re-render and on unmount. Dependency array optimizes: omitted means run every render, empty means run once on mount, with dependencies means run when dependencies change. Proper dependencies prevent bugs and unnecessary runs.

Answer

I created useLocalStorage custom hook: useState persists to localStorage, useEffect syncs changes, returns state and setter. useForm hook: manages form state with validation, returns values, errors, handleChange, handleSubmit. Custom hooks enabled reusing logic across multiple components without code duplication.

Answer

const ThemeContext createContext; function ThemeProvider { children } { const theme, setTheme useState light; return ThemeContext.Provider value={{theme, setTheme}} {children} /ThemeContext.Provider }

Answer

When multiple child components need same state, move it to closest common parent. Parent becomes source of truth. Children receive state and setState via props. Enables synchronization.

Answer

Child to parent: callback functions passed via props. Parent calls setState in callback. Multiple children: lift state to common parent, pass state and setState via props. Siblings communicate through parent. Complex apps use Context API or state management like Redux. Composition enables encapsulating related components. Custom hooks enable sharing logic between components without component nesting.

Answer

Error boundaries catch errors in child component tree. I created ErrorBoundary class component with componentDidCatch lifecycle. Displayed error UI instead of crashing app. Wrapped risky components in boundary. Error boundaries don't catch event handler errors or async errors; try-catch handles those.

Answer

function Parent() { const handleChange useCallback ((data) => console.log data, []); return Child onChange={handleChange} /Child }

Answer

Create Context with createContext. Wrap tree with Provider. useContext hook accesses value. Eliminates passing props through intermediate components. Perfect for themes, auth, language.

Answer

Context: createContext creates context object. Provider wraps component tree, provides value. useContext hook accesses value in consumers. Simple for small to medium apps. Redux: centralized store, actions, reducers. More complex setup. Better for large apps with complex state logic and middleware needs. Redux enables time-travel debugging. Context is built-in, Redux is external library.

Answer

I used React Testing Library to test components. render renders component. screen queries found elements. userEvent simulates user interactions like clicks and typing. expect assertions verify behavior. Testing component with mock functions verified correct callbacks were called. Testing focused on user behavior not implementation details.

Answer

function Expensive() { const result useMemo (() => expensiveCalculation someValue, [someValue]); return div {result} /div }

Answer

Hooks enable functional components to use state, effects, context, and other features. Follow rules: call only at top level, never conditionally. Enables cleaner code than class components.

Answer

useState manages local state. useEffect handles side effects. useContext accesses context value. useReducer manages complex state with actions, alternative to multiple useState calls. useMemo memoizes computed values, prevents recalculation on every render. useCallback memoizes functions, prevents unnecessary re-renders of child components receiving function as prop. Custom hooks: functions starting with use, combine built-in hooks to create reusable logic.

Answer

Virtual list rendering: only render visible items. react-window library virtualized list. Memoized row components with React.memo. Sorted large lists with efficient algorithms. useTransition deferred updates. Pagination instead of infinite scroll. Resulted in 60fps performance even with thousands of items.

Answer

function Card() { return div Card content /div } function CardList() { return div Card /Card Card /Card /div }