📅 Day 1 – React Basics & Virtual DOM

Core Concepts: What React is, why it exists, how it works internally.

Objective: Understand the “why” behind React.

1. What is React, and why was it created?

   ➤ Follow-ups:

   • Why do we call React a “library” and not a “framework”?
   • How does React differ from jQuery or vanilla JS DOM updates?

2. What is the Virtual DOM?

   ➤ Follow-ups:

   • How does React use the diffing algorithm for efficient updates?
   • Is Virtual DOM faster than direct DOM manipulation always?

3. What is Reconciliation in React?

   ➤ Follow-ups:

   • How does React decide which elements to re-render?
   • What are keys, and how do they affect reconciliation?

4. Explain how React updates the UI after a state change.

   ➤ Follow-ups:

   • What is the role of the Fiber architecture here?
   • What happens if you mutate state directly?

5. Output-based:

   function App() {
     console.log("Rendered");
     return <h1>Hello</h1>;
   }
   export default App;
   
   

   ➤ Follow-ups:

   • When and how often will “Rendered” appear?
   • What happens if this component’s parent re-renders?

📅 Day 2 – Components & Rendering

Core Concepts: Functional vs Class components, rendering logic.

1. What are functional and class components?

   ➤ Follow-ups:

   • How did React Hooks change the role of functional components?
   • Which are more performant and why?

2. What is the difference between props and state?

   ➤ Follow-ups:

   • Can you modify props inside a child component?
   • What triggers re-render — prop change or state change?

3. How does React decide when to re-render a component?

   ➤ Follow-ups:

   • Does setting the same state value cause re-render?
   • How can React.memo help optimize this?

4. Explain the component lifecycle (mount → update → unmount).

   ➤ Follow-ups:

   • Which hook equivalents map to class lifecycle methods?
   • What happens if cleanup is not performed?

5. Output-based:

   function Counter() {
     const [count, setCount] = useState(0);
     console.log("Rendered");
     return <button onClick={() => setCount(count + 1)}>{count}</button>;
   }
   
   

   ➤ Follow-ups:

   • How many times will “Rendered” log after three clicks?
   • What if you call setCount(count) instead of setCount(count+1)?

📅 Day 3 – JSX & Keys

Core Concepts: JSX syntax, rendering, keys.

1. What is JSX and how does it work internally?

   ➤ Follow-ups:

   • What does JSX compile to?
   • Can JSX have if-else directly inside return?