React.js Core Concepts — Interview Explanation with Examples

This document summarizes core React concepts with short definitions and examples.

Table of Contents

1. Components
2. JSX (JavaScript XML)
3. Curly Braces in JSX
4. Fragments
5. Props (Properties)
6. Children
7. Keys
8. Rendering
9. Event Handling
10. State
11. Controlled Components
12. Hooks
13. Purity
14. Strict Mode
15. Effects
16. Refs
17. Context
18. Portals
19. Suspense
20. Error Boundaries

---

1. Components

Definition: Components are the basic building blocks of a React application. Each component represents a reusable piece of UI.

Why it matters: They improve reusability, separation of concerns, and maintainability.

Example:

function Button() {
  return <button>Click Me</button>;
}

// Usage
<Button />;

---

2. JSX (JavaScript XML)

Definition: JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside JavaScript.

How it works: JSX is compiled into React.createElement() calls.

Example:

const element = <h1>Hello, React!</h1>;
// Transpiles to: React.createElement('h1', null, 'Hello, React!')

---

3. Curly Braces in JSX

Definition: Curly braces embed dynamic JavaScript expressions in JSX.

Example:

const name = "Sayan";
return <h1>Hello, {name}</h1>;

// Expressions
{
  2 + 2;
}
{
  isLoggedIn ? "Welcome" : "Login";
}

---

4. Fragments

Definition: Fragments let you return multiple elements from a component without adding extra DOM nodes.

Example:

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

---

5. Props (Properties)

Definition: Props pass data from a parent to a child component. They are read-only.

Example:

function User({ name }) {
  return <p>Hello {name}</p>;
}

// Parent
<User name="Sayan" />;

---

6. Children

Definition: children is a special prop used to pass nested JSX into a component.

Example:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card>
  <h2>User Profile</h2>
</Card>;

---

7. Keys

Definition: Keys help React identify changed, added, or removed items in a list.

Example:

{
  users.map((user) => <li key={user.id}>{user.name}</li>);
}

Avoid using array indices as keys unless the list is static.

---

8. Rendering

Definition: Rendering converts components into DOM elements. React uses a virtual DOM, diffing, and reconciliation.

Example:

root.render(<App />);

Components re-render when their state or props change.

---

9. Event Handling

Definition: React uses camelCase event handlers and passes synthetic events.

Example:

function ClickButton() {
  const handleClick = () => alert("Button clicked");
  return <button onClick={handleClick}>Click</button>;
}

---

10. State

Definition: State stores dynamic data inside a component and triggers re-renders when updated.

Example:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

---

11. Controlled Components

Definition: Form elements whose values are controlled by React state.

Example:

function Form() {
  const [email, setEmail] = useState("");
  return <input value={email} onChange={(e) => setEmail(e.target.value)} />;
}

---

12. Hooks

Definition: Hooks let function components use state, lifecycle logic, and refs.

Common hooks: useState, useEffect, useRef.

Example:

useEffect(() => {
  console.log("Component mounted");
}, []);

---

13. Purity

Definition: React components should be pure: same props + state → same UI output. Avoid side effects during render.

Wrong:

// Don't call this during render
const value = Math.random();

Right:

useEffect(() => {
  fetchData();
}, []);

---

14. Strict Mode

Definition: React.StrictMode is a development-only tool that detects unsafe patterns and side effects.

Example:

<React.StrictMode>
  <App />
</React.StrictMode>

---

15. Effects

Definition: Effects handle side effects like API calls, timers, and subscriptions.

Example:

useEffect(() => {
  fetch("/api/data");
}, []);

---

16. Refs

Definition: Refs provide direct access to DOM elements or component instances.

Example:

const inputRef = useRef();
<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Focus Input</button>

---

17. Context

Definition: Context shares data across the component tree without prop drilling.

Example:

const ThemeContext = createContext("light");

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>;

const theme = useContext(ThemeContext);

---

18. Portals

Definition: Portals render components outside the parent DOM hierarchy, useful for modals and overlays.

Example:

ReactDOM.createPortal(<Modal />, document.getElementById("modal-root"));

---

19. Suspense

Definition: Suspense handles loading states for lazy-loaded components or async data.

Example:

<Suspense fallback={<Loading />}>
  <LazyComponent />
</Suspense>

---

20. Error Boundaries

Definition: Error boundaries catch JavaScript errors in child components and show a fallback UI.

Example:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) return <h1>Something went wrong</h1>;
    return this.props.children;
  }
}