React – Quick Recap

A complete React 2025 recap covering core concepts, hooks, state management, routing, forms, and optimization. Includes modern React 18+ features like concurrent rendering, automatic batching, and server components for efficient, scalable apps.

1. Core Concepts

React is a component-based UI library used to build reusable, declarative, and efficient user interfaces.

Key Principles:

• Declarative: Describe what UI should look like, not how to manipulate the DOM.
• Component-Based: Reusable UI blocks with their own state & logic.
• Unidirectional Data Flow: Data flows from parent → child via props.

Example:

function Welcome({ name }) {
  return <h1>Hello, {name}</h1>;
}

export default function App() {
  return <Welcome name="Rupa" />;
}

2. JSX & Rendering

• JSX = JavaScript XML syntax that compiles to React.createElement().
• Must return one parent element.

Example:

const element = <div className="greeting">Hello, React!</div>;

3. Functional Components vs Class Components

✅ Functional (Modern React)

• Simpler, faster, and use hooks for state/lifecycle logic.

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

Class (Legacy)

• Uses lifecycle methods like componentDidMount(), setState().
• Rarely used in new React projects (but still seen in older codebases).

4. Props and State

Props are read-only; state changes trigger re-render.

5. Hooks (React 16.8+)

useState

Local state management.

const [value, setValue] = useState(initialValue);

useEffect

Side effects (fetching, subscriptions, DOM manipulations).

useEffect(() => {
  console.log('Mounted or updated');
  return () => console.log('Cleanup');
}, [dependency]);

useContext

Access context without prop drilling.

const theme = useContext(ThemeContext);

useRef

Access DOM elements or store mutable values that don’t trigger re-renders.

const inputRef = useRef();

useMemo / useCallback

Optimize performance by memoizing expensive computations or functions.

const sortedList = useMemo(() => sortList(list), [list]);
const handleClick = useCallback(() => doSomething(id), [id]);

useReducer

Alternative to useState for complex state logic.

function reducer(state, action) {
  switch(action.type) {
    case 'increment': return { count: state.count + 1 };
    default: return state;
  }
}
const [state, dispatch] = useReducer(reducer, { count: 0 });

6. Component Communication

Parent → Child

Via props:

<Child message="Hello!" />

Child → Parent

Via callback props:

function Parent() {
  const handleAdd = (data) => console.log(data);
  return <Child onAdd={handleAdd} />;
}

Sibling ↔ Sibling

Via shared parent state or Context API.

7. Conditional Rendering

{isLoggedIn ? <Dashboard /> : <Login />}
{items.length && <List items={items} />}

8. Lists and Keys

const books = ['Sapiens', 'Atomic Habits'];
return (
  <ul>
    {books.map((b, i) => <li key={i}>{b}</li>)}
  </ul>
);

Keys must be unique and stable across renders.

9. Context API (Global State)

Used for sharing data (e.g., theme, user) across components without prop drilling.

const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

10. Performance Optimization

11. React Router (v6+)

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

12. Custom Hooks

Encapsulate reusable logic:

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  return data;
}

Usage:

const users = useFetch('/api/users');

13. Error Boundaries

Class components only — catch rendering errors.

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() { return this.state.hasError ? <h1>Error!</h1> : this.props.children; }
}

14. Forms and Controlled Inputs

function Form() {
  const [name, setName] = useState('');
  const handleSubmit = e => { e.preventDefault(); console.log(name); };
  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button>Submit</button>
    </form>
  );
}

15. State Management Options

16. APIs & Data Fetching

Use fetch() or axios, typically inside useEffect.

useEffect(() => {
  fetch('/api/books')
    .then(res => res.json())
    .then(setBooks);
}, []);

Or via React Query / TanStack Query:

const { data, isLoading } = useQuery(['books'], fetchBooks);

17. React 18+ Features

18. Testing (Jest + React Testing Library)

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments counter', () => {
  render(<Counter />);
  fireEvent.click(screen.getByText('+'));
  expect(screen.getByText('1')).toBeInTheDocument();
});

19. Common Interview Topics

• Virtual DOM & Reconciliation
• Controlled vs Uncontrolled components
• Lifting state up
• React.memo vs useMemo
• PureComponent vs memo
• Prop drilling & Context API
• Synthetic events & event pooling
• Keys and re-render behavior
• useEffect dependency pitfalls

20. Ecosystem & Tooling