# Top 10 React Interview Questions and Answers Preparing for a React interview? 🚀 Don’t worry — here are **10 of the most common questions** explained in **simple, beginner-friendly language** with detailed answers. By the end, you’ll feel confident tackling these in any interview. --- ## 1. What is the difference between Functional and Class Components? - **Functional Components**: - They are just JavaScript functions. - They receive `props` (data) as input and return JSX (UI). - They were originally *stateless*, but with **hooks** (`useState`, `useEffect`, etc.), they can now handle state and side effects. - Example: ```javascript function Welcome(props) { return

Hello, {props.name}

; } ``` - **Class Components**: - They are ES6 classes that extend `React.Component`. - They manage their own `state` and lifecycle methods. - Example: ```javascript class Welcome extends React.Component { render() { return

Hello, {this.props.name}

; } } ``` 👉 Today, **functional components are preferred** because they are simpler and hooks make them powerful. --- ## 2. What is the difference between useEffect and useLayoutEffect? - **`useEffect`**: - Runs **after React updates the DOM**. - Non-blocking → browser paints first, then runs the effect. - Best for: data fetching, event listeners, API calls, logging. - Example: ```javascript useEffect(() => { console.log("Runs after render"); }, []); ``` - **`useLayoutEffect`**: - Runs **synchronously after DOM updates but before the browser paints**. - Blocking → can delay paint if heavy. - Best for: measuring DOM size/position, animations where flicker must be avoided. 👉 Rule of thumb: **use `useEffect` by default**, and use `useLayoutEffect` only if you need to measure or manipulate DOM before the screen updates. --- ## 3. What is React Reconciliation (Virtual DOM)? - React uses a **Virtual DOM** (a lightweight copy of the real DOM). - When something changes: 1. React updates the Virtual DOM. 2. React compares (diffs) the new Virtual DOM with the old one. 3. Only the changed parts are updated in the actual DOM. 👉 This process makes React fast because it avoids re-rendering the entire page. --- ## 4. Why are Keys important in lists? - Keys help React **identify each list item uniquely**. - Without keys, React may update the wrong item when something changes. - Example: ```javascript {items.map(item => (

{item.name}

))} ``` - **Good keys**: unique IDs. - **Bad keys**: array indexes → can cause bugs (like losing input focus). 👉 Always use a **unique and stable key**. --- ## 5. What is the difference between React.memo, useMemo, and useCallback? - **React.memo**: - A higher-order component that prevents re-rendering if props haven’t changed. - Example: ```javascript const MyComponent = React.memo(function MyComponent(props) { return

{props.value}

; }); ``` - **useMemo**: - Caches the result of an expensive calculation. - Runs only when dependencies change. - Example: ```javascript const result = useMemo(() => heavyCalculation(data), [data]); ``` - **useCallback**: - Caches a function definition so it isn’t recreated on every render. - Example: ```javascript const handleClick = useCallback(() => doSomething(id), [id]); ``` 👉 Simple rule: *React.memo → components, useMemo → values, useCallback → functions*. --- ## 6. What is the React Context API? - Context API helps you **share data globally** without passing props manually at every level. - Example: theme, authentication, language. - Steps: 1. Create context → `const ThemeContext = createContext();` 2. Provide value → `` 3. Consume value → `useContext(ThemeContext)` 👉 Context is great for global data, but overusing it may cause unnecessary re-renders. --- ## 7. What are Controlled and Uncontrolled Components? - **Controlled Components**: - React controls the value of input elements via state. - Example: ```javascript const [name, setName] = useState(""); setName(e.target.value)} /> ``` - **Uncontrolled Components**: - The DOM itself manages the value. - You use `ref` to get the value. - Example: ```javascript const inputRef = useRef(); ``` 👉 Controlled = more predictable & validated. Uncontrolled = less code, but less control. --- ## 8. What are the Rules of Hooks? 1. Only call hooks **at the top level** (not inside loops, conditions, or nested functions). 2. Only call hooks **inside functional components or custom hooks**. 👉 Why? React tracks hooks **by order of calls**. Breaking the rules can confuse React and cause bugs. --- ## 9. What is the difference between useState and useReducer? - **useState**: - Best for **simple state** like counters, toggles, form fields. - Example: ```javascript const [count, setCount] = useState(0); ``` - **useReducer**: - Best for **complex state logic** with multiple actions. - Uses a reducer function (`state, action` → new state). - Example: ```javascript function reducer(state, action) { switch (action.type) { case 'increment': return {count: state.count + 1}; case 'decrement': return {count: state.count - 1}; default: return state; } } const [state, dispatch] = useReducer(reducer, {count: 0}); ``` 👉 Rule of thumb: start with `useState`, switch to `useReducer` if state grows complex. --- ## 10. How can you optimize performance in React? Ways to make React apps faster: 1. **React.memo** → avoid re-rendering unchanged components. 2. **useMemo & useCallback** → memoize values and functions. 3. **Code splitting** with `React.lazy` and `Suspense`. 4. **Windowing/virtualization** for large lists (`react-window`, `react-virtualized`). 5. Keep state local whenever possible (don’t lift state too high). 6. Use proper **keys** in lists. 👉 Optimize only when needed. First make it work, then make it fast. --- ## ✅ Conclusion These 10 React questions cover the **core concepts every beginner must know**. With these explanations, you’ll be ready to confidently answer most beginner-to-intermediate React interview questions.