🚀 React Interview Questions Asked in recent interview (For Mid–Senior Frontend Developers) During interviews, many React questions are not about definitions but about understanding how React behaves internally. Here are some commonly asked questions along with clear explanations. 1️⃣ Multiple components are rendering and the app becomes slow — why? When multiple components re-render frequently, performance can degrade. This usually happens because React re-renders a component whenever its state or props change. Common causes: Parent component re-renders, causing all child components to re-render. Passing new object/array references in props. Inline functions created on every render. Expensive computations inside render. Example problem: <Child data={{ name: "John" }} /> Even if the value is the same, a new object reference is created on every render, so React treats it as a change. Solutions: Use React.memo for child components. Avoid inline objects/functions. Memoize values with useMemo. Memoize callbacks with useCallback. 2️⃣ Dependency array exists in useEffect, but I still want to avoid unnecessary re-renders Important concept: useEffect does not control rendering. Rendering happens because of state or prop changes, not because of useEffect. Example: useEffect(() => { fetchData(); }, [userId]); This only controls when the effect runs, not when the component renders. Ways to reduce unnecessary renders: Avoid unnecessary state updates Use React.memo Use useMemo / useCallback Lift state only when needed 3️⃣ What is Hydration in React? Hydration is mainly used in server-side rendering frameworks like Next.js. Steps: Server renders HTML. Browser receives fully rendered HTML. React attaches event listeners and makes it interactive. Example flow: Server: HTML sent to browser Client: React attaches JS behavior to existing HTML This process is called hydration. If the server HTML and client render output differ, React throws a hydration mismatch warning. Common causes: Random values Date/time differences Browser-only APIs 4️⃣ React Strict Mode in Development vs Production React.StrictMode is a development tool. Development behavior: Components render twice intentionally Helps detect side effects Warns about unsafe lifecycle methods Important point: Strict Mode does NOT affect production. Double rendering happens only in development. Purpose: Detect bugs early Ensure components are resilient 5️⃣ Same hook behaves differently in two sibling components — why? Hooks are isolated per component instance. Example: <ComponentA /> <ComponentB /> Even if both use the same hook: const [count, setCount] = useState(0); Each component maintains its own independent state. Possible reasons behavior differs: Different props Different lifecycle timing Conditional rendering Parent re-rendering one child more often #ReactJS #FrontendDevelopment #JavaScript #ReactInterview #WebDevelopment #NextJS #SoftwareEngineering #FrontendEngineer #ReactHooks #CodingInterview
Jyotsna Swasti it's good Can you please share pdf format of this
Nice explanation, Jyotsna Swasti I’ve faced hydration mismatch issues in Next.js when server-rendered HTML differed from client output, especially when using Date() or browser-only APIs like window. Exactly as you mentioned !!