How React Works

React is a JavaScript library designed to help developers build user interfaces by breaking screens into small, reusable pieces called components. It exists because managing dynamic interfaces directly with the browser DOM becomes difficult as applications grow. In real projects such as dashboards, ecommerce sites, chat apps, and admin panels, many parts of the screen change based on user actions or incoming data. React makes this easier by letting developers describe what the UI should look like for a given state, and React handles updating the page efficiently.

At its core, React works through components, JSX, props, state, and rendering. A component is a function that returns UI. JSX is a syntax that looks like HTML but is actually JavaScript-powered markup. Props are inputs passed from one component to another. State is internal data that can change over time. When props or state change, React re-renders the component and compares the new output with the previous one using a process often called reconciliation. Instead of rebuilding the entire page, React updates only the necessary parts of the real DOM through its virtual DOM strategy.

In practice, React follows a predictable flow. First, developers define components. Next, React creates a virtual representation of the UI. When data changes, React generates a new virtual UI tree, compares it with the previous version, identifies differences, and updates the browser efficiently. This model reduces manual DOM manipulation and helps keep UI logic organized. React is commonly used with tools like Vite, Next.js, or Create React App-style setups, but the underlying idea stays the same: UI is a function of data.

Step-by-Step Explanation

Begin by creating a component. A component is usually a JavaScript function with a capitalized name. It returns JSX. JSX may look like HTML, but under the hood it becomes JavaScript instructions that React understands.

Next, React renders that component into a root element in the page. During rendering, React reads the component function and builds a virtual DOM tree. If the component receives props, React uses them as inputs. If the component uses state, React stores and tracks that data internally.

When a user clicks a button or data changes, state updates. React then calls the component again to calculate what the UI should now look like. It compares the new virtual DOM with the old one, finds what changed, and updates only those specific DOM nodes. This makes updates efficient and keeps code declarative: developers describe the desired UI instead of writing low-level DOM commands.

Comprehensive Code Examples

function Welcome() {
  return 
Hello, React!
;
}

export default Welcome;

function ProductCard(props) {
  return (
    

      
{props.name}

      
Price: ${props.price}

    

  );
}

export default function App() {
  return ;
}

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}

       setCount(count + 1)}>Increment
    

  );
}

export default Counter;

import { useState } from 'react';

function SearchBox() {
  const [query, setQuery] = useState('');

  return (
    

              value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search products"
      />
      
You are searching for: {query}

    

  );
}

export default SearchBox;

Common Mistakes

• Changing variables instead of state: Updating a normal variable does not trigger a re-render. Use state setters such as setCount.
• Using lowercase component names: React treats lowercase tags as HTML elements. Name components like Header, not header.
• Mutating state directly: Do not modify arrays or objects in place. Create new values so React can detect changes properly.
• Expecting immediate state updates: State updates are scheduled. Do not rely on the old value changing instantly in the same line.

Best Practices

• Keep components small and focused on one responsibility.
• Use props for passing data down and state for data that changes inside a component.
• Write declarative UI: describe what should appear for each state.
• Use meaningful component names and organize files clearly.
• Avoid direct DOM manipulation unless absolutely necessary.

Practice Exercises

• Create a component called Greeting that displays a message using JSX.
• Build a UserCard component that receives name and role as props and displays them.
• Create a counter component with a button that increases state and shows how React re-renders the UI.

Mini Project / Task

Build a simple profile viewer with one parent component and two child components. Pass user data as props, display it on the screen, and add a button that changes part of the displayed information using state.

Challenge (Optional)

Create a small shopping list interface where users can type an item name, add it to a list stored in state, and render the updated list without manually touching the DOM.

Setting Up with Vite

Vite is a modern frontend build tool designed to make development faster and simpler. It exists because older tooling often took too long to start, reload, and bundle projects. In real-world React teams, Vite is widely used to create new applications quickly, provide fast local development servers, and prepare production-ready builds with minimal configuration. When you use Vite with React, you get a lightweight project structure, instant feedback during coding, and support for modern JavaScript features. For beginners, it is one of the easiest ways to start a React app because it removes much of the setup complexity. The basic setup usually includes creating a project, installing dependencies, running the development server, and understanding the generated files. You may also see variations such as JavaScript-based projects and TypeScript-based projects, depending on whether you want static typing. Vite is especially useful for dashboards, admin panels, landing pages, e-commerce frontends, and internal company tools where fast iteration matters.

The main idea behind Vite is simple: during development it serves source files directly and updates only what changed, which makes the experience much faster than traditional full rebundling workflows. In production, it still creates optimized assets for deployment. When a React project is created with Vite, you commonly get files like index.html, src/main.jsx, src/App.jsx, and a package.json file for scripts and dependencies. Understanding these files early helps you become comfortable with the React project lifecycle.

Step-by-Step Explanation

First, make sure Node.js is installed. Then open a terminal and run the create command. A common syntax is npm create vite@latest. You will be asked for a project name, a framework, and a variant. Choose React, then choose JavaScript or TypeScript. Next, move into the project folder with cd project-name, install packages using npm install, and start the app with npm run dev. Vite will print a local URL, often http://localhost:5173. Open that in the browser to see the starter app.

Inside the project, main.jsx is the entry point that renders the root React component. App.jsx contains the main interface. You can edit App.jsx and instantly see changes in the browser. For production, use npm run build to generate an optimized dist folder. You can preview it locally with npm run preview.

Comprehensive Code Examples

npm create vite@latest my-react-app
cd my-react-app
npm install
npm run dev

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  
    
  
)

// src/App.jsx
function App() {
  return (
    

      
Hello from Vite + React

      
My project is running successfully.

    

  )
}

export default App

// Real-world example: starter layout
function App() {
  return (
    

      
Team Dashboard

      
Built with React and Vite for fast development.

      Create Report
    

  )
}

export default App

// Advanced usage: environment value
function App() {
  const appName = import.meta.env.VITE_APP_NAME || 'React App'

  return 
{appName}

}

export default App

Common Mistakes

• Running commands outside the project folder: Use cd your-project-name before npm install or npm run dev.
• Choosing the wrong template: Make sure you select React, not another framework like Vue or Vanilla.
• Editing the wrong file: Most beginner UI changes should start in src/App.jsx.
• Using Node.js versions that are too old: Install a modern LTS version for compatibility.

Best Practices

• Use clear project names that match the app purpose.
• Keep components inside the src folder and organize early.
• Use environment variables with the VITE_ prefix when needed.
• Run npm run build before deployment to catch issues early.
• Start with the default structure, then refactor gradually as the app grows.

Practice Exercises

• Create a new Vite React app and replace the default content with your name and a short welcome message.
• Add a button and a paragraph in App.jsx to simulate a simple homepage.
• Run a production build and locate the generated dist folder.

Mini Project / Task

Build a simple developer portfolio starter using Vite and React with a heading, short bio, skills list, and contact button.

Challenge (Optional)

Create a Vite React project that reads an app title from a .env file and displays it dynamically in the interface.

JSX Syntax

JSX stands for JavaScript XML. It is a syntax extension used in React that lets developers write HTML-like structures directly inside JavaScript. React uses JSX to describe what the user interface should look like, making component code easier to read and maintain. Instead of manually calling functions like React.createElement() for every element, JSX gives you a cleaner and more natural way to build UI. In real projects, JSX is used for rendering buttons, forms, cards, navigation bars, dashboards, and entire application layouts. It is especially helpful because React applications are built from reusable components, and JSX makes those components feel close to visual markup while still keeping JavaScript power available.

JSX looks similar to HTML, but it is not exactly HTML. It follows JavaScript rules and is transformed into regular JavaScript behind the scenes. Some syntax differences are important: use className instead of class, write JavaScript expressions inside curly braces, and close all tags properly. JSX can render simple text, dynamic values, lists, conditions, and nested components. You can also store JSX in variables, return it from functions, and compose multiple UI parts together. Understanding these patterns is essential because almost every React component you write will use JSX in some form.

Step-by-Step Explanation

Start with a React component, which is usually a JavaScript function. Inside that function, return JSX. JSX must return a single parent element, such as a div, section, or React fragment. To display dynamic data, place JavaScript expressions inside curly braces like {name}. Attributes are written similarly to HTML, but some names change to match JavaScript conventions. For example, use htmlFor for labels and className for CSS classes. Inline styles are written as JavaScript objects, such as style={{ color: 'blue', fontSize: '18px' }}. JSX also supports self-closing tags like and . If you need conditional display, use expressions such as ternary operators or logical AND. JSX is powerful because it blends structure and behavior in one place while still remaining component-based.

Comprehensive Code Examples

Basic example

function Welcome() {
  const name = 'Ava';

  return (
    

      
Hello, {name}!

      
Welcome to React.

    

  );
}

Real-world example

function ProductCard() {
  const product = {
    title: 'Wireless Mouse',
    price: 29.99,
    inStock: true
  };

  return (
    

      
{product.title}

      
Price: ${product.price}

      
{product.inStock ? 'In Stock' : 'Out of Stock'}

    

  );
}

Advanced usage

function DashboardHeader() {
  const user = 'Mina';
  const notifications = 3;

  const headerStyle = {
    backgroundColor: '#20232a',
    color: 'white',
    padding: '16px'
  };

  return (
    

      
Admin Dashboard

      
Hello, {user}

      {notifications > 0 && 
You have {notifications} new notifications.
}
    

  );
}

Common Mistakes

• Using class instead of className: React expects className for CSS classes.
• Returning multiple sibling elements without a wrapper: wrap them in one parent element or a fragment.
• Forgetting to close tags: self-closing elements like images and inputs must end with />.
• Writing statements inside curly braces: JSX accepts expressions, not full statements like if directly inside markup.

Best Practices

• Keep JSX readable by breaking large UIs into smaller components.
• Use descriptive variable names for dynamic values rendered inside JSX.
• Prefer conditional expressions that are easy to understand instead of deeply nested logic.
• Use semantic elements such as header, main, and section when appropriate.
• Move complex calculations outside the returned JSX to keep markup clean.

Practice Exercises

• Create a component that displays your name, role, and favorite programming language using JSX.
• Build a simple profile card with a heading, paragraph, and one image using correct JSX attributes.
• Create a status component that shows either Online or Offline using a ternary expression inside JSX.

Mini Project / Task

Build a small product showcase component that displays a product name, price, short description, and availability message using JSX expressions and proper element structure.

Challenge (Optional)

Create a dashboard summary component that displays a username, a dynamic task count, and a warning message only when the number of pending tasks is greater than zero.

Components

Components are the building blocks of a React application. Instead of writing one large page full of HTML, styling, and behavior, React encourages developers to split the interface into small, reusable pieces called components. A button, navigation bar, product card, search box, and user profile can each be their own component. This exists to improve reuse, readability, testing, and maintenance. In real projects, teams use components to create design systems, dashboards, checkout pages, and form-heavy business tools. React mainly uses function components today, although class components exist in older codebases. A function component is simply a JavaScript function that returns JSX, which is a syntax that looks like HTML but is actually JavaScript. Components can be simple presentational pieces or smart containers that coordinate data and events.

Function components are the modern default because they are simpler and work well with hooks. Class components use ES6 classes and lifecycle methods, but they are less common in new projects. Components can also be categorized by purpose: presentational components focus on displaying UI, while container components manage logic and pass data down. Another useful idea is composition. Instead of inheriting behavior, React components are often combined by nesting one inside another. This makes layouts flexible and keeps responsibilities clear.

Step-by-Step Explanation

To create a component, start with a JavaScript function. Its name should begin with an uppercase letter because React treats lowercase tags as regular HTML elements. Inside the function, return JSX. JSX lets you describe UI using tag-like syntax. Then export the component so other files can import it. To use a component, place it in JSX like a custom tag. Components may receive inputs called props, which are read-only values passed from a parent. A component can also render children, meaning nested content placed between opening and closing tags.

function Welcome() {
  return 
Hello, React!
;
}

export default Welcome;

You can then use it inside another component with . If you pass props, define a parameter such as function Welcome(props) or destructure it as function Welcome({ name }).

Comprehensive Code Examples

function Greeting({ name }) {
  return 
Welcome, {name}!
;
}

export default function App() {
  return ;
}

function ProductCard({ title, price, inStock }) {
  return (
    

      
{title}

      
${price}

      
{inStock ? 'In stock' : 'Out of stock'}

    

  );
}

export default function App() {
  return ;
}

function Card({ title, children }) {
  return (
    

      
{title}

      
{children}

    

  );
}

function UserProfile({ user }) {
  return (
    
      
Name: {user.name}

      
Role: {user.role}

    
  );
}

export default function App() {
  const user = { name: 'Lina', role: 'Frontend Developer' };
  return ;
}

Common Mistakes

• Using lowercase component names like

  when you meant a custom component. Fix: start custom component names with uppercase letters.

• Trying to return multiple sibling elements without wrapping them. Fix: wrap them in a parent element.

• Modifying props inside a component. Fix: treat props as read-only and compute new values instead.

• Putting too much logic into one giant component. Fix: split repeated or complex UI into smaller reusable parts.

Best Practices

• Keep components focused on one responsibility.

• Prefer function components for modern React code.

• Use descriptive names such as ProductCard or SidebarMenu.

• Pass only the props a component actually needs.

• Use composition with children for flexible layouts.

Practice Exercises

• Create a StudentCard component that shows a student name and grade using props.

• Build a MessageBox component and render it three times with different messages.

• Create a reusable Panel component that displays a title and nested content through children.

Mini Project / Task

Build a small profile dashboard with separate components for a header, user card, skills list, and footer, then assemble them inside a main App component.

Challenge (Optional)

Create a reusable StatusBadge component that changes its displayed text based on props and use it inside multiple other components without duplicating code.

Props

Props, short for properties, are the way React components receive data from other components. They exist so that user interfaces can be broken into small, reusable pieces while still allowing each piece to display different content. In real applications, props are used everywhere: a product card receives a product name and price, a profile component receives a user image and bio, and a button component receives text, color, and click behavior. Without props, every component would be hardcoded and much less reusable.

At a basic level, props are passed from a parent component to a child component as attributes that look similar to HTML attributes. The child component then reads those values and uses them inside JSX. Props can hold strings, numbers, booleans, arrays, objects, and even functions. A very common subtype of props is children, which represents whatever content is placed between a component’s opening and closing tags. Another important pattern is destructured props, where you extract values directly in the function parameter for cleaner code.

Props are read-only. This is one of the most important ideas for beginners. A child component should never try to change its own props. Instead, if data must change, the parent should manage that change and pass updated props down again. This one-way data flow is a core React design principle because it makes applications easier to reason about and debug.

Step-by-Step Explanation

To use props, first create a component. Next, render that component from another component and pass values as attributes. Finally, access those values inside the child component.

Example syntax: the parent writes . The child can receive all props as one object, like function Welcome(props), then use props.name. A cleaner style is destructuring: function Welcome({ name }).

You can also pass non-string values using curly braces. For example, age={25}, isOnline={true}, or skills={["React", "JS"]}. To pass content between tags, use children.

Comprehensive Code Examples

function Welcome(props) {
  return 
Hello, {props.name}!
;
}

export default function App() {
  return ;
}

function ProductCard({ title, price, inStock }) {
  return (
    

      
{title}

      
Price: ${price}

      
{inStock ? "In stock" : "Out of stock"}

    

  );
}

export default function App() {
  return (
    
  );
}

function Card({ title, children, onSelect }) {
  return (
    

      
{title}

      
{children}

      Select
    

  );
}

export default function App() {
  const handleSelect = () => alert("Card selected");

  return (
    
      
This plan includes support and analytics.

    
  );
}

Common Mistakes

• Treating props like editable variables: Do not change props inside a child component. Fix: update data in the parent and pass new props.
• Forgetting curly braces for JavaScript values: Writing price="29.99" makes it a string. Fix: use price={29.99} for a number.
• Using the wrong prop name: Passing username but reading name causes undefined output. Fix: keep prop names consistent.
• Ignoring children: Some beginners pass nested content but never render {children}. Fix: include it in the component where needed.

Best Practices

• Use descriptive prop names like productName, isActive, and onSubmit.
• Destructure props in function parameters for cleaner components.
• Keep props focused; pass only the data a component needs.
• Use callback props such as onClick or onDelete to let children communicate actions upward.
• Design reusable components by replacing hardcoded values with props.

Practice Exercises

• Create a UserBadge component that receives name and role props and displays both.
• Build a MovieCard component that receives title, year, and rating props.
• Create a Panel component that uses the children prop to display custom nested content.

Mini Project / Task

Build a small product showcase page with three reusable ProductCard components. Pass each card different props such as name, price, image label text, and stock status.

Challenge (Optional)

Create a reusable Button component that accepts label, variant, and onClick props, then render multiple buttons with different styles and behaviors.

State with useState

Step-by-Step Explanation

import React, { useState } from 'react';

const [stateVariable, setStateVariable] = useState(initialValue);

• `stateVariable`: This is the current value of your state.


• `setStateVariable`: This is a function that you use to update `stateVariable`.


• `initialValue`: This is the value that `stateVariable` will have on the first render. It can be any valid JavaScript data type (number, string, boolean, object, array, null, etc.).

setStateVariable(newValue);

setStateVariable(prevValue => prevValue + 1);

Comprehensive Code Examples

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Initialize count to 0

  return (
    

      
You clicked {count} times

       setCount(count + 1)}>
        Click me
      
       setCount(0)}>
        Reset
      
    

  );
}

export default Counter;

import React, { useState } from 'react';

function ToggleMessage() {
  const [isVisible, setIsVisible] = useState(false); // Initial state: hidden

  const toggleVisibility = () => {
    setIsVisible(!isVisible); // Toggle the boolean value
  };

  return (
    

      
        {isVisible ? 'Hide Message' : 'Show Message'}
      
      {isVisible && 
This is a secret message!
}
    

  );
}

export default ToggleMessage;

import React, { useState } from 'react';

function UserProfileEditor() {
  const [user, setUser] = useState({
    name: 'Jane Doe',
    email: '[email protected]',
    age: 30
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setUser(prevUser => ({
      ...prevUser, // Spread previous state to maintain other properties
      [name]: value // Update the specific property
    }));
  };

  return (
    

      
Edit User Profile

      
        Name:
                  type="text"
          name="name"
          value={user.name}
          onChange={handleChange}
        />
      

      
        Email:
                  type="email"
          name="email"
          value={user.email}
          onChange={handleChange}
        />
      

      
        Age:
                  type="number"
          name="age"
          value={user.age}
          onChange={handleChange}
        />
      
      
Current Profile:

      
Name: {user.name}

      
Email: {user.email}

      
Age: {user.age}

    

  );
}

export default UserProfileEditor;

Common Mistakes

• 
  Directly modifying state: A common mistake is trying to modify the state variable directly (e.g., `count = count + 1;` or `user.name = 'New Name';`). This will not trigger a re-render, and your UI will not update. Always use the setter function provided by `useState` (e.g., `setCount(count + 1);` or `setUser({...user, name: 'New Name'});`).
  


• 
  Forgetting to spread objects/arrays: When updating an object or array in state, you must create a new object or array. Directly mutating the existing one will lead to unexpected behavior and missed re-renders. Use the spread operator (`...`) to create a new copy and then apply your changes (e.g., `setItems(prevItems => [...prevItems, newItem]);` or `setUser(prevUser => ({ ...prevUser, age: 31 }));`).
  


• 
  Incorrect initial state for complex logic: If your initial state calculation is expensive, providing a direct value to `useState` will cause it to run on every re-render. Instead, pass a function to `useState` that returns the initial value. This function will only execute once on the initial render (e.g., `const [data, setData] = useState(() => computeInitialData());`).
  

Best Practices

• 
  Use descriptive names: Name your state variables and their setters clearly (e.g., `[isOpen, setIsOpen]`, `[products, setProducts]`).
  


• 
  Keep state minimal: Only store data in state that is absolutely necessary for rendering or user interaction. Derived values should be computed from existing state or props.
  


• 
  Prefer primitive types for simple state: If a piece of state only needs to hold a single value (number, string, boolean), use a separate `useState` call for it rather than embedding it in a larger object, unless they are logically grouped.
  


• 
  Use functional updates for complex state logic: When the new state depends on the previous state, always use the functional form of the setter (`setCount(prevCount => prevCount + 1)`). This prevents issues with stale closures.
  

Practice Exercises

• 
  Exercise 1: Text Input Display
  Create a functional component that has an input field and a paragraph. As the user types into the input field, the text in the paragraph should update in real-time to reflect the input's value.
  


• 
  Exercise 2: Simple To-Do List Item
  Build a component that displays a single to-do item (e.g., 'Learn React Hooks'). Add a button next to it that, when clicked, toggles a 'completed' status. Display ' (Completed)' next to the item when it's completed.
  


• 
  Exercise 3: Color Changer
  Create a component with a simple square `div` element. Add three buttons: 'Red', 'Blue', and 'Green'. When a button is clicked, change the background color of the square `div` to the corresponding color.
  

Mini Project / Task

Challenge (Optional)

Rendering Lists

Core Concepts & Sub-types

Step-by-Step Explanation

Comprehensive Code Examples

function SimpleList() {
  const fruits = ['Apple', 'Banana', 'Cherry'];

  return (
    

      {fruits.map((fruit, index) => (
        
{fruit}

      ))}
    

  );
}

function ProductList({ products }) {
  return (
    

      
Available Products

      {products.length === 0 ? (
        
No products found.

      ) : (
        

          {products.map(product => (
            

              
{product.name}

              
Price: ${product.price.toFixed(2)}

              
Category: {product.category}

            

          ))}
        

      )}
    

  );
}

const App = () => {
  const myProducts = [
    { id: 'p1', name: 'Laptop', price: 1200, category: 'Electronics' },
    { id: 'p2', name: 'Keyboard', price: 75, category: 'Electronics' },
    { id: 'p3', name: 'Mouse', price: 30, category: 'Electronics' },
  ];
  return ;
};

function TodoItem({ todo, onDelete }) {
  return (
    

      {todo.text}
       onDelete(todo.id)}>Delete
    

  );
}

function TodoList() {
  const [todos, setTodos] = React.useState([
    { id: 't1', text: 'Learn React Hooks' },
    { id: 't2', text: 'Build a list component' },
    { id: 't3', text: 'Refactor old code' },
  ]);

  const handleDeleteTodo = (id) => {
    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== id));
  };

  return (
    

      
My Todo List

      

        {todos.map(todo => (
          
        ))}
      

    

  );
}

Common Mistakes

or
, or within a fragment).


Best Practices

1. Always provide a unique and stable key: This is paramount for performance and correctness. Use IDs from your data whenever possible.
2. Extract list items into separate components: For complex list items, create a dedicated component (e.g., , ). This improves readability, reusability, and makes your components more manageable. Pass the individual item data as props to this component.
3. Avoid expensive operations inside map(): While map() is efficient, avoid performing heavy calculations or side effects within its callback, as it runs for every item on every render.
4. Handle empty lists gracefully: Always consider what your UI should look like when the list is empty. Display a message like "No items found" instead of just rendering nothing.


Practice Exercises

1. Create a component that displays a list of your 5 favorite books, including their titles and authors. Use an array of objects for the books.
2. Modify the book list component to include a "Read" button next to each book. (The button doesn't need to do anything yet, just render it).
3. Create a list of numbers from 1 to 10. Render each number inside a
tag.


Mini Project / Task

Build a simple contact list application. The application should display a list of contacts, where each contact has a name and a phone number. Initialize the list with at least three contacts. Each contact should be rendered as a list item.


Challenge (Optional)

Extend the contact list application. Add an input field and a button to allow users to add new contacts to the list. Ensure that each new contact receives a unique ID (you can use a simple counter for this in the absence of a backend). The list should update dynamically as new contacts are added.

Conditional Rendering

Conditional rendering in React means showing different UI output depending on data, state, props, or user actions. In simple terms, your component decides what to display based on a condition. This exists because real applications are rarely static. A dashboard may show a loading spinner while data is being fetched, an e-commerce site may display an “Out of Stock” badge, and a login page may show different content for authenticated and guest users. React makes this natural because components are just JavaScript functions that return JSX, so you can use JavaScript conditions to control what appears on screen.

In practice, conditional rendering is used everywhere: hiding admin-only tools, displaying validation errors, toggling menus, switching between dark and light themes, and rendering empty states when lists have no items. Common patterns include if statements, ternary operators, logical AND &&, early returns, and rendering null when nothing should appear. Each pattern is useful in a different situation. An if block is great when logic is larger. A ternary is helpful when choosing between two values directly in JSX. The && operator is concise when you want to show something only if a condition is true. Returning null is useful when a component should render nothing.

Step-by-Step Explanation

Start with a condition, usually from state or props. Then decide which JSX should appear. For example, if isLoggedIn is true, show a welcome message; otherwise show a login prompt. In React, you cannot write a full if statement directly inside JSX braces, but you can compute values before the return, use a ternary inside JSX, or call helper functions.

Pattern 1: early return. Check a condition at the top of the component and return different JSX immediately.
Pattern 2: ternary operator. Syntax: condition ? trueOutput : falseOutput.
Pattern 3: logical AND. Syntax: condition && jsx. If the condition is true, the JSX appears.
Pattern 4: assign JSX to a variable before returning it. This keeps markup clean when logic gets longer.

Comprehensive Code Examples

function StatusMessage() {
  const isLoggedIn = true;

  return (
    

      {isLoggedIn ? 
Welcome back!
 : 
Please log in.
}
    

  );
}

function ProductCard() {
  const inStock = false;
  const name = "Wireless Mouse";

  return (
    

      
{name}

      {inStock && 
Available now
}
      {!inStock && 
Out of stock
}
    

  );
}

function Dashboard({ user, isLoading, isAdmin }) {
  if (isLoading) {
    return 
Loading dashboard...
;
  }

  if (!user) {
    return 
You must sign in to continue.
;
  }

  return (
    

      
Hello, {user.name}

      {isAdmin ? 
Admin tools enabled
 : 
Standard account
}
    

  );
}

The first example shows a basic two-way choice with a ternary. The second shows a real-world product status using &&. The third is more advanced because it handles loading, authentication, and role-based content with early returns and a ternary.

Common Mistakes

• Using if directly inside JSX: write the condition before return or use a ternary.
• Rendering 0 by accident with &&: values like 0 can appear on screen. Convert the condition to a boolean, such as count > 0 && ....
• Making nested ternaries too complex: deeply nested conditions are hard to read. Move logic into variables or helper functions.
• Forgetting a false case: if users need an alternative message, use a ternary instead of only &&.

Best Practices

• Use early returns for loading, error, and empty states.
• Keep JSX readable by moving complex conditions into variables.
• Use ternaries only for simple two-way decisions.
• Prefer descriptive boolean names like isLoading, hasError, and isAdmin.
• Render null when a component should intentionally display nothing.

Practice Exercises

• Create a component that shows “Day Mode” or “Night Mode” based on a boolean variable.
• Build a message component that shows a loading text until a variable changes to false.
• Create a profile card that displays an “Admin” badge only when isAdmin is true.

Mini Project / Task

Build a simple shopping cart summary that conditionally shows: a loading message, an empty-cart message, or a list header with total items depending on the cart state.

Challenge (Optional)

Create a single component that handles four UI states: loading, error, no data, and successful data display, while keeping the JSX clean and easy to read.

Handling Events

import React, { useState } from 'react';

function ClickCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    

      
You clicked {count} times

      

Forms and Controlled Inputs

Forms are a fundamental part of web applications, allowing users to interact with the application by inputting data. In React, handling form data differs from traditional HTML forms due to React's declarative nature and its concept of 'state'. Instead of letting the browser handle form data directly, React encourages the use of 'controlled components'. A controlled component is an input form element whose value is controlled by React state. This means that the data for the input element is handled by a React component, making the component the 'single source of truth' for that input's data.

Why do we use controlled components? This approach simplifies data flow, makes input values predictable, and allows for immediate validation and manipulation of input data. Imagine a login form: as a user types their username, you might want to check if it meets certain criteria in real-time. With controlled inputs, every keystroke updates the component's state, giving you immediate access to the current value and enabling such dynamic behaviors. This pattern is crucial for building robust and interactive user interfaces where user input needs to be managed efficiently.

Step-by-Step Explanation

To implement controlled inputs in React, you typically follow these steps:

• Declare State for Each Input: For every input field you want to control, declare a corresponding state variable using the useState hook. This state variable will hold the current value of the input.


• Bind Input's value to State: Set the value prop of the input element to the state variable you just created. This makes the input a 'controlled component' because its displayed value is now dictated by React state.


• Handle Changes with onChange: Attach an onChange event handler to the input. This function will be called every time the input's value changes (e.g., when a user types).


• Update State in onChange: Inside the onChange handler, update the state variable with the new value from the input. This is typically done using event.target.value.


• Handle Form Submission: For the form itself, attach an onSubmit event handler. Inside this handler, remember to call event.preventDefault() to stop the browser's default form submission behavior (which would cause a page reload). Then, you can access the collected form data from your component's state and process it (e.g., send it to an API).

Comprehensive Code Examples

Basic Example

A simple controlled text input.

import React, { useState } from 'react';

function ControlledInput() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    

      
        Name:
        
      
      
Hello, {name}!

    

  );
}

export default ControlledInput;

Real-world Example

A login form with multiple controlled inputs and submission handling.

import React, { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault(); // Prevent default browser form submission
    alert(`Submitting: Username - ${username}, Password - ${password}`);
    // In a real app, you'd send this data to an API
    setUsername(''); // Clear form after submission
    setPassword('');
  };

  return (
    
      

        
          Username:
          
        
      

      

        
          Password:
          
        
      

      Login
    
  );
}

export default LoginForm;

Advanced Usage

Handling multiple inputs with a single event handler function and a single state object.

import React, { useState } from 'react';

function MultiInputForm() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Form Data: ${JSON.stringify(formData, null, 2)}`);
    setFormData({ firstName: '', lastName: '', email: '' }); // Reset form
  };

  return (
    
      

        
          First Name:
                      type="text"
            name="firstName"
            value={formData.firstName}
            onChange={handleChange}
          />
        
      

      

        
          Last Name:
                      type="text"
            name="lastName"
            value={formData.lastName}
            onChange={handleChange}
          />
        
      

      

        
          Email:
                      type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        
      

      Submit
    
  );
}

export default MultiInputForm;

Common Mistakes

• Forgetting value or onChange: If you omit the value prop, the input will be 'uncontrolled' and React won't manage its state. If you omit onChange, the input will be read-only because React state never updates. Always provide both for controlled inputs.


• Mutating State Directly: Never directly modify the state object (e.g., formData.firstName = 'new'). Always use the state setter function (e.g., setFormData(...)) to ensure React re-renders the component.


• Forgetting event.preventDefault(): In the form's onSubmit handler, failing to call event.preventDefault() will cause the browser to perform its default form submission, leading to a page reload and loss of React state.

Best Practices

• Use a Single State Object for Complex Forms: For forms with many inputs, group related input values into a single state object. This makes updating and managing form data more organized.


• Extract Custom Hooks for Form Logic: For very complex forms, consider creating a custom hook (e.g., useForm) to encapsulate the state management and change handlers, making your components cleaner and more reusable.


• Implement Input Validation: Integrate validation logic within your onChange handlers or onSubmit handler to provide immediate feedback to users and ensure data integrity.


• Leverage Libraries for Advanced Forms: For highly complex forms with validation, error handling, and submission logic, consider using libraries like Formik or React Hook Form, which abstract away much of the boilerplate.

Practice Exercises

• Exercise 1: Simple Counter Input
  Create a component with a number input. The input should be controlled. Display the current value of the input below it.


• Exercise 2: Text Area Character Count
  Build a controlled </code> element. As the user types, display a live character count.</li><br><li><strong>Exercise 3: Basic Contact Form</strong><br>Develop a simple contact form with controlled inputs for 'Name', 'Email', and 'Message'. When the form is submitted, use an <code>alert()</code> to display all the entered data.</li></ul><br><h4>Mini Project / Task</h4><br><p>Build a simple 'To-Do List Item Editor'. It should have an input field that, when text is typed into it, updates a displayed 'To-Do Item Preview' in real-time. Include a 'Save' button that, when clicked, logs the final To-Do item text to the console and clears the input field.</p><br><h4>Challenge (Optional)</h4><br><p>Enhance the 'To-Do List Item Editor'. Add a checkbox for 'High Priority'. When the checkbox is checked, the To-Do item preview should turn red. Ensure the checkbox is also a controlled input, and its state is managed correctly along with the text input.</p></div> </div>

useEffect Hook

The useEffect Hook lets React function components perform side effects after rendering. A side effect is anything that reaches outside the component’s pure UI calculation, such as fetching API data, setting a timer, listening for window events, updating the page title, or syncing local storage. Before Hooks, these tasks were usually handled in class lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount. useEffect brings those responsibilities into function components in a cleaner and more organized way.

In real applications, this Hook is used when a product page loads data from a server, when a chat app subscribes to messages, when a form saves draft input to local storage, or when a dashboard updates the browser tab title based on selected reports. The Hook runs after React updates the DOM, so your UI appears first and then the effect logic runs. This makes rendering predictable. There are common patterns to understand: an effect with no dependency array runs after every render, an effect with an empty dependency array runs once after the first render, and an effect with specific dependencies runs whenever those values change. Effects can also return a cleanup function, which React runs before the effect reruns or when the component unmounts. Cleanup is essential for removing listeners, clearing timers, and preventing memory leaks.

Step-by-Step Explanation

Basic syntax: useEffect(() => { /* side effect */ return () => { /* cleanup */ }; }, [dependencies]).

Step 1: import useEffect from React.
Step 2: call it inside your component, not outside and not inside loops or conditions.
Step 3: place side-effect logic inside the callback.
Step 4: provide a dependency array to control when the effect runs.
Step 5: if needed, return a cleanup function.

Think of dependencies as values your effect uses from the component scope. If your effect reads userId, that value usually belongs in the dependency array so React can rerun the effect when it changes.

Comprehensive Code Examples

Basic example

import React, { useEffect } from 'react';

function PageTitle() {
  useEffect(() => {
    document.title = 'Welcome to React App';
  }, []);

  return 
Home Page
;
}

Real-world example

import React, { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, [userId]);

  return user ? 
{user.name}
 : 
Loading...
;
}

Advanced usage

import React, { useEffect, useState } from 'react';

function WindowWidthTracker() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return 
Window width: {width}
;
}

Common Mistakes

• Missing dependencies: An effect uses a value but does not list it in the dependency array. Fix: include all referenced reactive values unless you intentionally restructure the logic.
• Forgetting cleanup: Event listeners and timers stay active after unmount. Fix: return a cleanup function.
• Causing infinite loops: Updating state inside an effect that reruns every render. Fix: use the correct dependency array and avoid unnecessary state updates.

Best Practices

• Keep each effect focused on one responsibility, such as data fetching or event subscription.
• Always think carefully about dependencies; they control correctness and performance.
• Use cleanup for subscriptions, timers, and listeners to avoid memory leaks.
• Do not use effects for logic that can be calculated during rendering.

Practice Exercises

• Create a component that changes the browser tab title to the current count whenever a button is clicked.
• Build a component that starts a timer on mount and clears it on unmount.
• Fetch and display a list of posts from a public API when the component loads.

Mini Project / Task

Build a weather search component that fetches weather data whenever the user changes the city name, displays loading text, and cleans up any outdated request logic if needed.

Challenge (Optional)

Create a responsive component that tracks window width, stores the latest width in local storage, and restores that saved value when the component first loads.

useRef Hook

The useRef Hook in React lets you store a mutable value that survives across component re-renders without causing another render when that value changes. This is important because not every piece of data belongs in state. State is great when the UI must update, but sometimes you only need to remember a value, access a DOM element, or keep track of something behind the scenes. In real projects, useRef is often used to focus an input, control media playback, store timer IDs, track previous values, or integrate with browser APIs and third-party libraries.

There are two main ways developers use useRef. First, as a DOM reference: React attaches the ref to an element so you can directly access it through ref.current. Second, as a persistent container for mutable values: you can store something like a counter, interval ID, or previous prop value in ref.current without triggering a re-render. This makes useRef different from useState. Updating state re-renders the component; updating a ref does not. That difference is the key reason this Hook exists.

Step-by-Step Explanation

To use it, import useRef from React and create a ref with const myRef = useRef(initialValue). React returns an object with a single property: current. If the ref is attached to an HTML element like , then after render, myRef.current points to that DOM node. If the ref is used to store a value, then you manually read and write myRef.current.

Beginners should remember three rules. First, refs persist between renders. Second, changing ref.current does not refresh the screen. Third, refs are best for values not meant for rendering. If the UI must immediately show the updated value, use state instead.

Comprehensive Code Examples

Basic example

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    

      
      Focus Input
    

  );
}

export default FocusInput;

Real-world example

import React, { useEffect, useRef } from 'react';

function SearchBox() {
  const searchRef = useRef(null);

  useEffect(() => {
    searchRef.current.focus();
  }, []);

  return ;
}

export default SearchBox;

Advanced usage

import React, { useEffect, useRef, useState } from 'react';

function TimerTracker() {
  const intervalRef = useRef(null);
  const rendersRef = useRef(0);
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    rendersRef.current += 1;
  });

  const startTimer = () => {
    if (!intervalRef.current) {
      intervalRef.current = setInterval(() => {
        setSeconds((prev) => prev + 1);
      }, 1000);
    }
  };

  const stopTimer = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  };

  return (
    

      
Seconds: {seconds}

      
Render count: {rendersRef.current}

      Start
      Stop
    

  );
}

export default TimerTracker;

Common Mistakes

• Using a ref for visible UI data: if the screen should update, use state instead of only changing ref.current.
• Accessing ref.current too early: a DOM ref may be null before the element mounts, so check it first or use useEffect.
• Forgetting cleanup: when storing timers or external instances in refs, clear them when no longer needed.

Best Practices

• Use refs for DOM access, timers, previous values, and external library instances.
• Keep refs out of rendering logic unless you understand that changes will not trigger re-renders.
• Name refs clearly, such as inputRef, videoRef, or intervalRef.

Practice Exercises

• Create a component with an input and a button that focuses the input using useRef.
• Build a text area that automatically receives focus when the component loads.
• Create a timer with start and stop buttons, storing the interval ID in a ref.

Mini Project / Task

Build a simple note-taking input where the text field is automatically focused on page load and a clear button returns focus to the input after clearing.

Challenge (Optional)

Create a component that stores the previous value of a text input in a ref and displays both the current and previous values on the screen.

useContext Hook

Step-by-Step Explanation

• Create a Context: First, you need to create a Context object using React.createContext(). This object comes with a Provider and a Consumer component. We primarily use the Provider.
• Provide a Value: Wrap the components that need access to the context in the Context.Provider component. The Provider takes a value prop, which will be the data you want to make available to all its descendants.
• Consume the Value: In any descendant component, call the useContext(YourContext) Hook, passing the Context object you created. This Hook will return the current context value.

// 1. Create a Context
const MyContext = React.createContext(defaultValue);

// 2. Provide a value
function App() {
  const [theme, setTheme] = React.useState('light');

  return (
    
      
    
  );
}

// 3. Consume the value
function Toolbar() {
  const theme = React.useContext(MyContext);
  return 
Current theme: {theme}
;
}

Comprehensive Code Examples

import React, { createContext, useContext, useState } from 'react';

// 1. Create the Context
const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    // 2. Provide the theme value and toggle function
    
      

        
Theme Switcher Example

        
      

    
  );
}

function Toolbar() {
  // 3. Consume the theme and toggle function
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    

      
Current theme: {theme}

      Toggle Theme
      
    

  );
}

function ThemedButton() {
  const { theme } = useContext(ThemeContext);
  return (
    
      I am a {theme} button
    
  );
}

export default App;

import React, { createContext, useContext, useState } from 'react';

// Context for user authentication
const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null); // null means not logged in, object means logged in

  const login = (username) => {
    // Simulate API call
    setTimeout(() => setUser({ username, id: Date.now() }), 500);
  };

  const logout = () => {
    // Simulate API call
    setTimeout(() => setUser(null), 300);
  };

  return (
    
      {children}
    
  );
}

function UserProfile() {
  const { user, logout } = useContext(AuthContext);

  if (!user) {
    return 
Please log in to view your profile.
;
  }

  return (
    

      
Welcome, {user.username}!

      
User ID: {user.id}

      Logout
    

  );
}

function LoginForm() {
  const [username, setUsername] = useState('');
  const { user, login } = useContext(AuthContext);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (username) {
      login(username);
      setUsername('');
    }
  };

  if (user) {
    return null; // Don't show login form if already logged in
  }

  return (
    
              type="text"
        placeholder="Enter username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      Login
    
  );
}

function App() {
  return (
    
      

        
Authentication Example with useContext

        
        
      

    
  );
}

export default App;

import React, { createContext, useContext, useState } from 'react';

// Context for user authentication
const AuthContext = createContext(null);
// Context for application settings
const SettingsContext = createContext({ language: 'en', notifications: true });

// Custom Hook for AuthContext
function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

// Custom Hook for SettingsContext
function useSettings() {
  const context = useContext(SettingsContext);
  if (!context) {
    throw new Error('useSettings must be used within a SettingsProvider');
  }
  return context;
}

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const login = (username) => setUser({ username });
  const logout = () => setUser(null);
  return (
    
      {children}
    
  );
}

function SettingsProvider({ children }) {
  const [settings, setSettings] = useState({ language: 'en', notifications: true });
  const toggleNotifications = () => setSettings(prev => ({ ...prev, notifications: !prev.notifications }));
  return (
    
      {children}
    
  );
}

function UserDashboard() {
  const { user, logout } = useAuth();
  const { settings, toggleNotifications } = useSettings();

  if (!user) return 
Please log in.
;

  return (
    

      
Hello, {user.username}!

      
Language: {settings.language}

      
Notifications: {settings.notifications ? 'On' : 'Off'}

      Toggle Notifications
      Logout
    

  );
}

function App() {
  return (
    
      
        

          
Multiple Contexts & Custom Hooks Example

          
        

      
    
  );
}

export default App;

Common Mistakes

• Forgetting to Wrap Components in Provider: If you call useContext in a component that is not a descendant of the corresponding Context.Provider, the hook will return the defaultValue provided to createContext (if any) or undefined/null, leading to unexpected behavior or errors. Always ensure the component consuming the context is within the provider's tree.
  Fix: Double-check your component tree and make sure the Context.Provider wraps all components that need access to its value.
• Updating Context Value Incorrectly (Performance Issues): If the value prop passed to Context.Provider is an object or array that is created inline (e.g., value={{ data: myData }}) in every render, it will cause all consuming components to re-render, even if the underlying data hasn't logically changed, because the reference to the object changes. This can lead to performance issues.
  Fix: Memoize the context value using useState or useMemo if the value is an object or array and you want to prevent unnecessary re-renders. For example: const contextValue = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);
• Overusing Context for Local State: While useContext is great for global state, it's not a replacement for local component state (useState) or prop drilling for data that is only relevant to a few closely related components. Overusing context can make your application harder to reason about and debug.
  Fix: Use useState for component-specific state and prop drilling for data that only needs to go down one or two levels. Reserve useContext for truly global or widely shared data.

Best Practices

• Separate Context Creation and Provider: It's a good practice to create your context and its provider component in a separate file (e.g., ThemeContext.js). This makes your code more organized and reusable.
• Provide Meaningful Default Values: When creating context with createContext(defaultValue), provide a default value that makes sense for consumers that might render without a provider, or for testing purposes.
• Memoize Context Values: If your context value is an object or array, use useMemo to prevent unnecessary re-renders of consuming components when the provider re-renders but the actual context value hasn't changed.
• Split Large Contexts: If a single context holds many unrelated values, consider splitting it into multiple, smaller contexts. This helps prevent unnecessary re-renders for components that only care about a subset of the context's data. For example, separate AuthContext from ThemeContext.
• Create Custom Hooks for Consumption: Encapsulate the useContext call within a custom hook (e.g., useAuth, useTheme). This provides a cleaner API for consuming components, abstracts away the context details, and allows for adding error handling if the hook is used outside of its provider.

Practice Exercises

• Beginner-friendly: Create a simple message display component. Use useContext to pass a static message string (e.g., "Hello from Context!") from an App component down to a DisplayMessage component, and render it.
• Intermediate: Build a language switcher. Create a LanguageContext that holds the current language string (e.g., 'en', 'es'). Provide buttons in your App component to change the language. In a child component, use useContext to display a greeting in the selected language.
• Intermediate: Develop a simple shopping cart item counter. Create a CartContext that stores the number of items in a cart. In the App component, display a button to "Add Item". In a header component, use useContext to display the current item count.

Mini Project / Task

Challenge (Optional)

useReducer Hook

The useReducer Hook is a React state management tool used when component state becomes more complex than a simple value update. While useState works well for small, isolated values, useReducer is better when state has multiple related fields, when updates depend on the previous state, or when many actions can change the same state object. It exists to make state updates predictable by moving logic into a reducer function. In real projects, it is commonly used for counters with multiple actions, form state, shopping carts, filters, task managers, and UI workflows such as loading, success, and error states.

The hook works with two main ideas: state and actions. A reducer is a function that receives the current state and an action, then returns the next state. The action usually contains a type property and sometimes extra data in payload. This pattern is similar to Redux, so learning it also helps you understand larger React architectures. Common action styles include increment/decrement actions, object field updates, reset actions, and async-related status changes like start, success, and failure.

Step-by-Step Explanation

The syntax is const [state, dispatch] = useReducer(reducer, initialState). First, create an initialState object or value. Next, write a reducer function like function reducer(state, action) { ... }. Inside it, use conditional logic or a switch statement to check action.type. Then return a new state object instead of changing the old one directly. Finally, call dispatch({ type: 'ACTION_NAME' }) when the user clicks a button or submits a form. React sends that action to the reducer, calculates the next state, and re-renders the component.

Comprehensive Code Examples

import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return initialState;
    default:
      return state;
  }
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

import { useReducer } from 'react';

const initialState = { name: '', email: '' };

function formReducer(state, action) {
  switch (action.type) {
    case 'update_field':
      return { ...state, [action.field]: action.value };
    case 'reset_form':
      return initialState;
    default:
      return state;
  }
}

export default function ContactForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  return (
    <form>
      <input
        value={state.name}
        onChange={(e) => dispatch({ type: 'update_field', field: 'name', value: e.target.value })}
        placeholder='Name'
      />
      <input
        value={state.email}
        onChange={(e) => dispatch({ type: 'update_field', field: 'email', value: e.target.value })}
        placeholder='Email'
      />
      <button type='button' onClick={() => dispatch({ type: 'reset_form' })}>Clear</button>
    </form>
  );
}

import { useEffect, useReducer } from 'react';

const initialState = { loading: false, data: [], error: '' };

function reducer(state, action) {
  switch (action.type) {
    case 'fetch_start':
      return { ...state, loading: true, error: '' };
    case 'fetch_success':
      return { loading: false, data: action.payload, error: '' };
    case 'fetch_error':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

export default function Products() {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    async function loadData() {
      dispatch({ type: 'fetch_start' });
      try {
        const res = await fetch('/api/products');
        const data = await res.json();
        dispatch({ type: 'fetch_success', payload: data });
      } catch {
        dispatch({ type: 'fetch_error', payload: 'Failed to load products' });
      }
    }
    loadData();
  }, []);

  return <div>{state.loading ? 'Loading...' : state.error || state.data.length}</div>;
}

Common Mistakes

• Mutating state directly. Fix: always return a new object or array using spread syntax.

• Forgetting a default case in the reducer. Fix: return the current state for unknown actions.

• Using useReducer for trivial state. Fix: prefer useState for very simple values.

• Sending unclear action names. Fix: use descriptive types such as add_item or toggle_theme.

Best Practices

• Keep reducers pure: no API calls, timers, or direct DOM work inside the reducer.

• Use action objects consistently with type and optional payload.

• Group related state in one reducer when updates are connected.

• Split large reducers into smaller helper functions if logic grows too much.

Practice Exercises

• Create a counter with increment, decrement, and reset actions using useReducer.

• Build a login form reducer that updates username and password fields and clears the form.

• Create a theme switcher reducer with actions for light mode and dark mode.

Mini Project / Task

Build a shopping cart component with actions to add an item, remove an item, increase quantity, decrease quantity, and clear the cart.

Challenge (Optional)

Build a task manager using useReducer where users can add tasks, mark them complete, edit task text, delete tasks, and filter by status.

useMemo and useCallback

React applications often re-render whenever state or props change. That behavior is useful, but sometimes a component repeats expensive calculations or recreates functions unnecessarily. useMemo and useCallback are optimization hooks that help control this. useMemo stores the result of a calculation and recomputes it only when its dependencies change. useCallback stores a function reference so React can reuse the same function between renders unless dependencies change. In real projects, these hooks are used in dashboards with filtered data, search interfaces, charts, long lists, and parent-child component trees where rerenders can become expensive.

The key difference is simple: useMemo returns a memoized value, while useCallback returns a memoized function. You should not add them everywhere. They are performance tools, not default coding style. If the calculation is cheap or the function is not causing rerender problems, using these hooks may add complexity without measurable benefit.

Step-by-Step Explanation

Basic syntax for useMemo looks like const value = useMemo(() => computeSomething(a, b), [a, b]). React runs the callback during rendering and saves the returned value. On the next render, React checks the dependency array. If a and b did not change, React reuses the old value.

Basic syntax for useCallback looks like const handleClick = useCallback(() => doSomething(id), [id]). React saves the function itself, not the result of calling it. This is especially useful when passing handlers to memoized child components because a new function reference can trigger a rerender even if the logic is the same.

A good beginner rule is this: use useMemo for expensive derived data such as sorted arrays, filtered lists, or computed statistics. Use useCallback when passing callbacks to children wrapped with React.memo or when a hook depends on a stable function reference.

Comprehensive Code Examples

import { useMemo, useState } from 'react';brbrfunction PriceSummary() {br  const [items, setItems] = useState([10, 20, 30]);br  const total = useMemo(() => {br    return items.reduce((sum, price) => sum + price, 0);br  }, [items]);brbr  return 
Total: {total}
;br}

import { useCallback, useState, memo } from 'react';brbrconst Button = memo(function Button({ onClick, label }) {br  console.log('Button rendered');br  return {label};br});brbrfunction Counter() {br  const [count, setCount] = useState(0);br  const handleIncrement = useCallback(() => {br    setCount(c => c + 1);br  }, []);brbr  return ;br}

import { useMemo, useCallback, useState } from 'react';brbrfunction ProductSearch({ products }) {br  const [query, setQuery] = useState('');br  const [sortBy, setSortBy] = useState('price');brbr  const filteredProducts = useMemo(() => {br    const filtered = products.filter(p =>br      p.name.toLowerCase().includes(query.toLowerCase())br    );br    return filtered.sort((a, b) => a[sortBy] - b[sortBy]);br  }, [products, query, sortBy]);brbr  const clearSearch = useCallback(() => {br    setQuery('');br  }, []);brbr  return (br    
br       setQuery(e.target.value)} />br      Clearbr      
br        {filteredProducts.map(product => (br          
{product.name} - ${product.price}
br        ))}br      
br    
br  );br}

Common Mistakes

• Using these hooks for everything. Fix: apply them only when there is a real rerender or expensive computation problem.
• Forgetting dependencies. Fix: include every reactive value used inside the callback unless you intentionally use a stable updater pattern.
• Using useCallback when you actually need a computed value. Fix: if you want a result, use useMemo instead.
• Mutating arrays before memoizing. Fix: create new arrays with methods like filter, map, or copied sorting patterns.

Best Practices

• Measure performance before optimizing, especially in small components.
• Use useMemo for costly derived values, not for simple expressions.
• Use useCallback with memoized children or effect dependencies that need stable references.
• Prefer state updater functions like setCount(c => c + 1) to reduce unnecessary dependencies.

Practice Exercises

• Create a component that filters a list of names using useMemo based on a search input.
• Build a parent component that passes a click handler to a memoized child using useCallback.
• Make a product list that calculates total inventory value with useMemo and resets a search box with useCallback.

Mini Project / Task

Build a searchable and sortable employee directory. Memoize the filtered and sorted employee list with useMemo, and memoize action handlers like reset, select employee, or toggle favorites with useCallback.

Challenge (Optional)

Create a dashboard widget with a large dataset where you compare behavior with and without memoization. Identify which values should use useMemo and which event handlers should use useCallback to reduce unnecessary child rerenders.

Custom Hooks

Custom Hooks are reusable JavaScript functions that let you extract and share stateful logic between React components. React includes built-in Hooks such as useState, useEffect, and useMemo, but real applications often repeat the same logic across multiple components. A custom Hook solves this by wrapping that repeated behavior into one reusable function, usually named with the use prefix such as useWindowWidth or useFetch. This pattern exists to improve readability, reduce duplication, and make components easier to test and maintain. In real life, custom Hooks are used for API requests, form handling, authentication, local storage syncing, media queries, debouncing input, and tracking browser events. There are no special React “types” of custom Hooks, but they are commonly grouped by purpose: state management Hooks, side-effect Hooks, browser API Hooks, data-fetching Hooks, and utility Hooks. The key idea is that a custom Hook does not render UI directly; it only manages logic and returns values or functions that components can use.

Step-by-Step Explanation

To create a custom Hook, define a function whose name starts with use. Inside it, you can call other Hooks just like in a component. Then return the state, derived values, or handler functions needed by the component. For example, a simple Hook can manage a counter. First, create function useCounter(initialValue). Next, call useState(initialValue). Then create helper functions like increment and decrement. Finally, return them in an object or array. Components that call this Hook get isolated state, meaning each component instance has its own separate data. Custom Hooks must follow the Rules of Hooks: call Hooks only at the top level and only inside React function components or other custom Hooks. Do not call them inside loops, conditions, or nested functions.

Comprehensive Code Examples

import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

function Counter() {
  const { count, increment, decrement, reset } = useCounter(5);

  return (
    

      
Count: {count}

      +
      -
      Reset
    

  );
}

import { useEffect, useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

function ThemeToggle() {
  const [darkMode, setDarkMode] = useLocalStorage('darkMode', false);

  return (
     setDarkMode(!darkMode)}>
      {darkMode ? 'Dark' : 'Light'} Mode
    
  );
}

import { useEffect, useState } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      try {
        setLoading(true);
        const response = await fetch(url);
        if (!response.ok) throw new Error('Request failed');
        const result = await response.json();
        if (!cancelled) setData(result);
      } catch (err) {
        if (!cancelled) setError(err.message);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    load();
    return () => { cancelled = true; };
  }, [url]);

  return { data, loading, error };
}

Common Mistakes

• Not using the use prefix: React tools expect Hook names like useSomething. Rename the function properly.
• Calling Hooks conditionally: Never place Hook calls inside if blocks or loops. Keep them at the top level.
• Mixing UI with logic: A custom Hook should manage logic, not return JSX. Return data and handlers instead.
• Forgetting dependencies: In Hooks using useEffect, include correct dependency values to avoid stale data.

Best Practices

• Keep Hooks focused: One Hook should solve one clear problem.
• Return a clean API: Expose only what components need, using an object for readability.
• Reuse built-in Hooks carefully: Combine useState, useEffect, and others to hide complexity.
• Document expected inputs and outputs: This makes Hooks easier for teams to reuse.
• Handle cleanup: Remove listeners, cancel requests, and avoid memory leaks.

Practice Exercises

• Create a useToggle Hook that switches between true and false.
• Build a useInput Hook that stores an input value and provides an onChange handler.
• Create a useDocumentTitle Hook that updates the browser tab title when a value changes.

Mini Project / Task

Build a reusable search box feature using a custom Hook that stores the query, updates it from an input field, and clears it with one button.

Challenge (Optional)

Create a useDebounce Hook that delays updating a search term for 500 milliseconds, then use it to reduce unnecessary API calls in a search component.

Component Lifecycle

Component lifecycle describes the stages a React component goes through from the moment it appears on the screen, while it updates, until it is removed. In older class components, lifecycle behavior was handled with methods such as componentDidMount, componentDidUpdate, and componentWillUnmount. In modern React, functional components usually handle lifecycle-related work with hooks, especially useEffect. This concept exists because user interfaces are not static: data loads from APIs, timers start and stop, event listeners are attached, and subscriptions must be cleaned up. In real projects, lifecycle knowledge is used when fetching user profiles after a page loads, updating charts when filters change, or clearing intervals when a component disappears.

The lifecycle can be understood in three main phases: mounting, updating, and unmounting. Mounting happens when a component is first added to the DOM. Updating happens when props or state change and React re-renders the component. Unmounting happens when the component is removed. With hooks, you can model these phases by controlling when an effect runs. An effect with an empty dependency array runs once after mount. An effect with dependencies runs after mount and whenever those values change. A cleanup function returned from the effect runs before the effect re-runs and when the component unmounts.

Step-by-Step Explanation

In a functional component, first import useEffect. Then place lifecycle logic inside useEffect(() => { ... }, dependencies). If the dependency array is empty, the effect runs once after the first render. If you include variables such as userId, the effect runs whenever userId changes. If you return a function, React uses it for cleanup. This is where you remove event listeners, clear timers, or cancel subscriptions.

Class components express the same idea differently. componentDidMount is used after first render, componentDidUpdate reacts to changes, and componentWillUnmount cleans up before removal. Even if you mainly use hooks, knowing these lifecycle categories helps you reason about component behavior clearly.

Comprehensive Code Examples

import { useEffect } from 'react';

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

  return 
Hello React
;
}

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, [userId]);

  return user ? 
{user.name}
 : 
Loading...
;
}

import { useEffect, useState } from 'react';

function Clock() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return 
{time}
;
}

Common Mistakes

• Forgetting cleanup: Timers and listeners continue running. Return a cleanup function from useEffect.
• Wrong dependency array: Missing dependencies can create stale data. Include values used inside the effect when needed.
• Fetching on every render: Omitting the dependency array may trigger repeated requests. Add proper dependencies.

Best Practices

• Keep effects focused on one responsibility, such as fetching data or managing subscriptions.
• Always clean up intervals, subscriptions, and event listeners.
• Use functional components and hooks for modern React code unless maintaining legacy class components.
• Avoid putting unrelated logic inside one large effect block.

Practice Exercises

• Create a component that logs a message only when it first mounts.
• Build a component that updates displayed text whenever a prop changes using useEffect.
• Create a timer component and properly clean it up when the component unmounts.

Mini Project / Task

Build a weather widget component that fetches weather data when it mounts, reloads data when the city prop changes, and cleans up any polling interval when removed.

Challenge (Optional)

Create a searchable product list where typing a category updates results, and add cleanup logic to prevent outdated asynchronous responses from affecting the UI.

Lifting State Up

Step-by-Step Explanation

Comprehensive Code Examples

Basic example: Temperature Converter

import React, { useState } from 'react';

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return '';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  return (
    

      
Enter temperature in {scale === 'c' ? 'Celsius' : 'Fahrenheit'}:

      
        value={temperature}
        onChange={(e) => onTemperatureChange(e.target.value)} />
    

  );
}

function Calculator() {&br>  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (temperature) => {
    setTemperature(temperature);
    setScale('c');
  };

  const handleFahrenheitChange = (temperature) => {
    setTemperature(temperature);
    setScale('f');
  };

  const celsius = scale === 'f'
    ? tryConvert(temperature, toCelsius)
    : temperature;
  const fahrenheit = scale === 'c'
    ? tryConvert(temperature, toFahrenheit)
    : temperature;

  return (
    

      
        scale="c"
        temperature={celsius}
        onTemperatureChange={handleCelsiusChange} />
      
        scale="f"
        temperature={fahrenheit}
        onTemperatureChange={handleFahrenheitChange} />
    

  );
}

export default Calculator;

Real-world example: Filterable Product Table

import React, { useState } from 'react';

function SearchBar({ filterText, onFilterTextChange }) {
  return (
    
      
        type="text"
        placeholder="Search..."
        value={filterText}
        onChange={(e) => onFilterTextChange(e.target.value)} />
    
  );
}

function ProductTable({ products, filterText }) {
  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(filterText.toLowerCase())
  );

  return (
    







        {filteredProducts.map(product => (




        ))}

      
        
          
Name
          
Price
        
      
      
          
            
{product.name}
            
{product.price}
          
      
    

  );
}

function FilterableProductTable({ products }) {
  const [filterText, setFilterText] = useState('');

  return (
    

      
        filterText={filterText}
        onFilterTextChange={setFilterText} />
      
        products={products}
        filterText={filterText} />
    

  );
}

const PRODUCTS = [
  {id: 1, name: 'Apple', price: '$1'},
  {id: 2, name: 'Banana', price: '$1'},
  {id: 3, name: 'Carrot', price: '$2'},
  {id: 4, name: 'Dragonfruit', price: '$4'},
];

function App() {
  return ;
}

export default App;

Advanced usage: Controlled components with multiple inputs

import React, { useState } from 'react';

function MyInput({ label, value, onChange, name }) {
  return (
    

      {label}: 
      
        type="text"
        name={name}
        value={value}
        onChange={onChange} />
    

  );
}

function UserForm() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevData => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted: ${JSON.stringify(formData)}`);
  };

  return (
    
      
        label="First Name"
        name="firstName"
        value={formData.firstName}
        onChange={handleChange} />
      
        label="Last Name"
        name="lastName"
        value={formData.lastName}
        onChange={handleChange} />
      
        label="Email"
        name="email"
        value={formData.email}
        onChange={handleChange} />
      
Submit
    
  );
}

export default UserForm;

Common Mistakes

Best Practices

Practice Exercises

Mini Project / Task

Challenge (Optional)

Component Composition

Component composition is the practice of building complex user interfaces by combining smaller, focused React components. Instead of creating one huge component that handles layout, styling, data, buttons, headers, and lists all at once, React encourages you to split UI into reusable pieces and assemble them like building blocks. This exists because real applications grow quickly, and composition makes code easier to read, test, maintain, and reuse. In real projects, composition is used everywhere: dashboards made from cards and charts, ecommerce pages built from product tiles and filters, and admin panels assembled from tables, forms, modals, and navigation sections.

The core idea is that a parent component can include child components and pass data or UI into them. Common composition patterns include simple nesting, using the special children prop, creating layout wrapper components, and passing components as props for flexible rendering. Simple nesting means one component renders another. The children prop lets you place custom content inside a reusable wrapper. Layout components define structure such as cards, sidebars, or page shells. Component-as-prop patterns let you inject a button, icon, or custom section into a reusable component without changing its internal logic.

Step-by-Step Explanation

Start with a small component that does one job. For example, a Button should display a button, not manage an entire page. Next, create a parent component that uses smaller components together. In JSX, composition looks like normal HTML nesting: <Card><Button /></Card>. If you want the wrapper to display custom inner content, access children in the component parameters. For example, function Card({ children }) means anything placed between <Card> tags becomes available inside that component. For more flexibility, you can pass another component or JSX through props such as header, footer, or icon. This avoids duplication while keeping the API clear for beginners and teams.

Comprehensive Code Examples

function Header() {
  return <h1>My App</h1>;
}

function Footer() {
  return <p>Copyright 2026</p>;
}

function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}

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

function Profile() {
  return (
    <Card>
      <h2>Ava Patel</h2>
      <p>Frontend Developer</p>
    </Card>
  );
}

function Modal({ title, footer, children }) {
  return (
    <div className="modal">
      <h2>{title}</h2>
      <div>{children}</div>
      <div className="modal-footer">{footer}</div>
    </div>
  );
}

function App() {
  return (
    <Modal
      title="Delete Item"
      footer={<button>Confirm</button>}
    >
      <p>Are you sure you want to delete this file?</p>
    </Modal>
  );
}

Common Mistakes

• Making components too large: Split UI into smaller parts when a component handles unrelated jobs.
• Forgetting children: If nested content does not appear, ensure the wrapper renders {children}.
• Passing too many props: If a component has a long prop list, consider composing smaller subcomponents instead.
• Mixing layout and business logic everywhere: Keep presentational wrappers focused on structure and appearance.

Best Practices

• Design components around a single responsibility.
• Use children for flexible wrappers like cards, panels, and modals.
• Prefer clear component APIs such as title, footer, and children.
• Compose behavior gradually instead of building monolithic components.
• Reuse layout components across pages for consistency.

Practice Exercises

• Create a Panel component that renders any nested content using children.
• Build a PageLayout component that composes a header, main content area, and footer.
• Make a reusable AlertBox that accepts a custom message and a custom action button through composition.

Mini Project / Task

Build a simple dashboard page composed of reusable components: Navbar, Sidebar, Card, and StatsPanel. Use children so each card can display different content.

Challenge (Optional)

Create a reusable Modal component that supports a title, body content through children, and an optional custom footer passed as a prop, then use it in two different ways without changing the modal code.

React Router Setup

Step-by-Step Explanation

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
    
  
);

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    

      
        } />
        } />
        } />
      
    

  );
}

export default App;

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    
  );
}

export default Navbar;

Comprehensive Code Examples

Basic example

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
    
  
);

// App.js
import { Routes, Route, Link } from 'react-router-dom';

const Home = () => 
Welcome to the Home Page!
;
const About = () => 
Learn About Us!
;
const Services = () => 
Our Services
;
const NotFound = () => 
404 - Page Not Found
;

function App() {
  return (
    

      
      

      
        } />
        } />
        } />
        } /> {/* Catch-all route for 404 */}
      
    

  );
}

export default App;

Real-world example (Nested Routes and URL Parameters)

// index.js (Same as basic example)
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
    
  
);

// App.js
import { Routes, Route, Link, useParams } from 'react-router-dom';

const posts = [
  { id: '1', title: 'First Post', content: 'This is the content of the first post.' },
  { id: '2', title: 'Second Post', content: 'This is the content of the second post.' },
  { id: '3', title: 'Third Post', content: 'This is the content of the third post.' },
];

const Home = () => 
Welcome to the Blog!
;

const PostList = () => (
  

    
All Posts

    

      {posts.map(post => (
        

          {post.title}
        

      ))}
    

  

);

const PostDetail = () => {
  const { postId } = useParams();
  const post = posts.find(p => p.id === postId);

  if (!post) {
    return 
Post not found!
;
  }

  return (
    

      
{post.title}

      
{post.content}

      Back to Posts
    

  );
};

function App() {
  return (
    

      
      

      
        } />
        } />
        } />
        {/* The :postId is a URL parameter that can be accessed via useParams() */}
      
    

  );
}

export default App;

Advanced usage (NavLink for active links)

// App.js (assuming index.js is set up with BrowserRouter)
import { Routes, Route, NavLink } from 'react-router-dom';
import './App.css'; // For active link styling

const Home = () => 
Welcome Home!
;
const Dashboard = () => 
User Dashboard
;
const Settings = () => 
Application Settings
;

function App() {
  return (
    

      
      

      
        } />
        } />
        } />
      
    

  );
}

export default App;

// App.css
nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 15px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: normal;
}

nav a.active {
  color: blue;
  font-weight: bold;
  border-bottom: 2px solid blue;
}

Common Mistakes

• Forgetting or : Your entire routing setup must be wrapped within a router component for React Router to function. Without it, you'll see errors like "useRoutes() may be used only in the context of a component."
  Fix: Ensure your root component, or at least the part of your application that uses routing, is a child of (usually in index.js).


• Using instead of : Using standard HTML tags for internal navigation will cause a full page refresh, defeating the purpose of a single-page application.
  Fix: Always use the or components provided by React Router for navigating between routes within your application.


• Incorrect path matching or ordering: Especially with dynamic segments (e.g., /users/:id) or catch-all routes (*), the order of components within matters. If a more general route comes before a more specific one, the general route might match unexpectedly.
  Fix: Place more specific routes above more general ones. For instance, /users/new should come before /users/:id. The * (catch-all for 404) route should always be the last one.

Best Practices

• Centralize Your Routes: For larger applications, consider creating a dedicated file (e.g., src/routes.js) to define all your application's routes. This improves maintainability and readability.


• Use NavLink for Navigation Menus: NavLink is specifically designed for navigation links that need to indicate when they are active. Its className prop (or style) accepts a function that gives you an isActive boolean, allowing you to easily apply active styles.


• Implement a 404 Page: Always include a catch-all route (} />) as the last route within your component. This provides a user-friendly experience when a user navigates to an invalid URL.


• Programmatic Navigation with useNavigate: When you need to navigate based on an event (e.g., after a form submission or clicking a button that isn't a Link), use the useNavigate hook. const navigate = useNavigate(); navigate('/dashboard');


• Nested Routes for Layouts: Utilize nested routes for complex layouts where parts of the UI remain consistent while sub-sections change. For example, a user dashboard might have /dashboard/profile and /dashboard/settings, sharing the Dashboard component's layout.

Practice Exercises

• Simple Page Navigation: Create a React application with three pages: Home, About, and Contact. Set up React Router to navigate between these pages using components in a navigation bar.


• Blog Post Viewer: Extend the previous application to include a 'Blog' section. The blog should have a main page listing several post titles. When a user clicks on a title, it should navigate to a dedicated page for that post, using a URL parameter (e.g., /blog/1).


• Active Link Styling: Modify your navigation bar to use and apply a distinct CSS style (e.g., background color or bold text) to the link corresponding to the currently active route.

Mini Project / Task

• /: Home Page (shows a welcome message)


• /products: Products List Page (displays a list of dummy products)


• /products/:productId: Product Detail Page (shows details for a specific product, using productId from the URL)


• /cart: Shopping Cart Page


• A navigation bar with links to Home, Products, and Cart.


• A 404 Not Found page for any unmatched routes.

Challenge (Optional)

Routes and Links

Step-by-Step Explanation

npm install react-router-dom
# or
yarn add react-router-dom

Comprehensive Code Examples

// src/components/Home.js
function Home() {
  return 
Welcome to the Home Page!
;
}
export default Home;

// src/components/About.js
function About() {
  return 
Learn more About Us.
;
}
export default About;

// src/components/Contact.js
function Contact() {
  return 
Contact us here.
;
}
export default Contact;

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    
      

        

        
          } />
          } />
          } />
        
      

    
  );
}

export default App;

// src/components/ProductList.js
import React from 'react';
import { Link } from 'react-router-dom';

const products = [
  { id: '1', name: 'Laptop' },
  { id: '2', name: 'Mouse' },
  { id: '3', name: 'Keyboard' },
];

function ProductList() {
  return (
    

      
Products

      

        {products.map(product => (
          

            
              {product.name}
            
          

        ))}
      

    

  );
}
export default ProductList;

// src/components/ProductDetail.js
import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';

const allProducts = [
  { id: '1', name: 'Laptop', description: 'Powerful computing machine.' },
  { id: '2', name: 'Mouse', description: 'Ergonomic wireless mouse.' },
  { id: '3', name: 'Keyboard', description: 'Mechanical gaming keyboard.' },
];

function ProductDetail() {
  const { productId } = useParams();
  const navigate = useNavigate();
  const product = allProducts.find(p => p.id === productId);

  if (!product) {
    return (
      

        
Product Not Found

         navigate('/products')}>Back to Products
      

    );
  }

  return (
    

      
{product.name}

      
ID: {product.id}

      
Description: {product.description}

       navigate('/products')}>Back to Products
    

  );
}
export default ProductDetail;

// src/App.js (partial update)
import ProductList from './components/ProductList';
import ProductDetail from './components/ProductDetail';

// ... inside App component return statement
        

        
          {/* ... existing routes */}
          } />
          } />
        
// ...

// src/components/Dashboard.js
import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    

      
Dashboard

      
      

      
      
    

  );
}
export default Dashboard;

// src/components/Profile.js
function Profile() {
  return 
User Profile Content
;
}
export default Profile;

// src/components/Settings.js
function Settings() {
  return 
Application Settings Content
;
}
export default Settings;

// src/App.js (partial update)
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

// ... inside App component return statement
        

        
          {/* ... existing routes */}
          }>
            } /> {/* Relative path */} 
            } /> {/* Relative path */}
            Please select a dashboard section} /> {/* Default child route */}
          
        
// ...

Common Mistakes

• Using `` instead of ``: A common mistake for beginners. Using standard anchor tags will cause a full page reload, defeating the purpose of an SPA and React Router. Always use `` for internal navigation.


• Forgetting `` wrapper: All React Router components (`Routes`, `Route`, `Link`, `useNavigate`, etc.) must be rendered within a `BrowserRouter` (or another router like `HashRouter`). If you forget this, your application will throw errors about not finding a router context.


• Incorrectly configuring `Routes` and `Route`: Placing `Route` components directly outside `Routes` or using `component` prop instead of `element` (in React Router v6) are common errors. Remember `Routes` acts as a container, and `Route` uses the `element` prop. Also, ensure your paths are correctly specified, especially for nested routes (relative vs. absolute).

Dynamic Routes

Dynamic routes let a React application display different content based on values inside the URL, such as a product ID, username, blog slug, or category name. Instead of creating a separate route for every possible item, you define a route pattern like /products/:id and React Router matches the changing part at runtime. This exists because real applications often have thousands of records, and manually writing routes like /products/1, /products/2, and so on is impossible to maintain.

In real life, dynamic routes are used in e-commerce product pages, social profile pages, article pages, learning platforms, dashboards, and admin panels. The main idea is simple: the path contains a variable segment, and your component reads that value to fetch or display the correct data. Common forms include route parameters such as :id, slugs like :postSlug, nested dynamic routes such as /users/:userId/orders/:orderId, and optional patterns handled through route structure and component logic.

Step-by-Step Explanation

First, define a route with a placeholder segment. In React Router, a colon marks a dynamic parameter, for example :id. Second, create the component that should render when the route matches. Third, use the useParams() hook to read the current route values. Fourth, use that value to find data locally or request it from an API. Finally, render loading, error, or not-found states when needed.

Syntax breakdown: <Route path="/products/:id" element={<ProductPage />} /> means any URL starting with /products/ followed by one segment will open ProductPage. Inside that component, const { id } = useParams() extracts the route value. If the URL is /products/42, then id becomes "42".

Comprehensive Code Examples

import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

function ProductPage() {
  const { id } = useParams();
  return 
Product ID: {id}
;
}

export default function App() {
  return (
    
      
        } />
      
    
  );
}

import { useParams } from "react-router-dom";

const posts = [
  { slug: "react-basics", title: "React Basics" },
  { slug: "dynamic-routes", title: "Dynamic Routes" }
];

function BlogPost() {
  const { slug } = useParams();
  const post = posts.find((item) => item.slug === slug);

  if (!post) return 
Post not found.
;
  return 
{post.title}
;
}

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

function UserOrderPage() {
  const { userId, orderId } = useParams();
  const [order, setOrder] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}/orders/${orderId}`)
      .then((res) => res.json())
      .then((data) => setOrder(data));
  }, [userId, orderId]);

  if (!order) return 
Loading order...
;
  return 
Order #{order.id} for User {userId}
;
}

Common Mistakes

• Forgetting the colon in the route path: writing /products/id creates a fixed path. Use /products/:id.
• Expecting numbers from useParams(): route params are strings. Convert when needed with Number(id).
• Ignoring missing data: if the param does not match a record, show a not-found message instead of crashing.
• Not updating effects: when fetching with params, include them in the dependency array.

Best Practices

• Use meaningful parameter names like :productId or :username.
• Validate route values before using them in API calls or rendering logic.
• Provide loading, empty, and error states for better user experience.
• Prefer slugs for readable public URLs and IDs for internal lookups when appropriate.
• Keep route structure consistent across the application.

Practice Exercises

• Create a route /users/:username and display the username on the page.
• Build a small article page using /articles/:slug and load article data from a local array.
• Create a nested route like /teams/:teamId/members/:memberId and print both values.

Mini Project / Task

Build a product catalog where a list page links to /products/:id, and each product detail page shows the selected product name, price, and description from a local dataset.

Challenge (Optional)

Create a blog system that supports both category and post routes, such as /blog/:category/:slug, and display a custom not-found message when either value is invalid.

Nested Routes

Nested routes in React are a routing pattern where one route lives inside another route. They exist because many real applications have layouts and pages that naturally contain sub-pages. For example, a dashboard may have a sidebar and top navigation that stay visible while the main content changes between Overview, Settings, and Billing. Instead of rebuilding the whole page for every path, nested routes let you keep a parent layout mounted and swap only the child content. This improves code organization, user experience, and reuse. In React Router, nested routes are commonly used for dashboards, admin panels, user profiles, e-commerce account areas, and documentation sites.

The main idea is simple: define a parent route, place child routes inside it, and render an Outlet inside the parent component. That Outlet acts like a placeholder where the matching child route appears. Nested routing also supports index routes, which are default child pages shown when the parent path matches exactly. You can also create dynamic nested routes, such as /users/:id/posts, for data-driven screens.

Step-by-Step Explanation

First, create a parent layout component. This component usually contains shared UI like headers, menus, or sidebars. Inside that component, import and render Outlet from React Router. Second, define routes using createBrowserRouter or Routes and place child route objects or elements inside the parent route. Third, use relative child paths like settings instead of writing the full URL every time. Fourth, add an index route if you want a default child screen. Finally, navigate between nested pages using Link or NavLink.

A nested routing structure usually has these parts: parent route, child routes, index route, dynamic child route, and the Outlet placeholder. If the parent component forgets to render Outlet, child pages will never appear even when the URL matches correctly.

Comprehensive Code Examples

Basic example

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

function Dashboard() {
  return (
    

      
Dashboard

      
      
    

  );
}

function Overview() { return 
Overview page
; }
function Settings() { return 
Settings page
; }

export default function App() {
  return (
    
      
        }>
          } />
          } />
        
      
    
  );
}

Real-world example

function AccountLayout() {
  return (
    

      
My Account

      
      
    

  );
}

}>
  } />
  } />
  } />

Advanced usage

function UsersLayout() {
  return (
    

      
Users

      
    

  );
}

function UserDetails() {
  const { id } = useParams();
  return 
Viewing user {id}
;
}

}>
  } />
  } />

Common Mistakes

• Forgetting Outlet: Child routes match but nothing renders. Add inside the parent layout.
• Using absolute child paths unnecessarily: Writing full paths can make route trees harder to maintain. Prefer relative child paths like settings.
• Missing an index route: The parent page looks empty when visiting the base path. Add index for a default child view.

Best Practices

• Create layout components for sections that share navigation or page structure.
• Use NavLink for active menu styling in nested navigation.
• Keep route definitions grouped by feature, such as account, admin, or dashboard.
• Use dynamic nested routes for entity-specific pages like users, products, or orders.

Practice Exercises

• Create a /dashboard route with child routes for overview and reports.
• Add an index route to a parent layout so a default page renders at the parent URL.
• Build a nested /products/:id route and add a child route for reviews.

Mini Project / Task

Build a small admin panel with a shared sidebar and nested pages for Home, Users, and Settings. The sidebar must stay visible while only the content area changes.

Challenge (Optional)

Create a nested documentation app where /docs shows a default intro page, and child routes like /docs/hooks and /docs/router load inside the same layout with active navigation links.

Protected Routes

Protected routes are routes that only allow access when a user meets a condition, usually being authenticated. In real applications, they are used for dashboards, account pages, admin panels, checkout flows, and any screen that should not be visible to anonymous users. Without route protection, a user could manually type a URL such as /dashboard and reach a page that should be restricted. In React, protected routes are commonly implemented with React Router and some form of authentication state, such as a context value, Redux store, or token stored in memory or browser storage.

The core idea is simple: before rendering a page component, check whether the user is allowed to enter. If yes, render the page. If not, redirect the user to a safer route like /login. Some applications also have role-based protection, where a normal logged-in user can access one route, but only an admin can access another. So protected routes often appear in two forms: authentication-based protection and authorization-based protection. Authentication checks who the user is, while authorization checks what the user is allowed to do.

Step-by-Step Explanation

Start by creating routes with React Router. Then create a wrapper component, often called ProtectedRoute. This component reads authentication state and decides what to render. If the user is authenticated, it returns the protected content. If not, it returns a redirect using Navigate.

A common beginner pattern is to pass protected page content as children. Another approach is to use nested routes with Outlet. The nested approach is cleaner when several pages share the same protection rule. You may also preserve the previous location so that after login the user returns to the page they originally wanted to visit.

Comprehensive Code Examples

Basic example

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

function ProtectedRoute({ isAuthenticated, children }) {
  return isAuthenticated ? children : ;
}

function App() {
  const isAuthenticated = true;

  return (
    
      
        Login Page} />
                  path="/dashboard"
          element={
            
              
Dashboard

            
          }
        />
      
    
  );
}

Real-world example

import { createContext, useContext, useState } from 'react';
import { Navigate, useLocation } from 'react-router-dom';

const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = useState({ name: 'Ava' });
  return {children};
}

function ProtectedRoute({ children }) {
  const { user } = useContext(AuthContext);
  const location = useLocation();

  if (!user) {
    return ;
  }

  return children;
}

Advanced usage

import { Outlet, Navigate } from 'react-router-dom';

function RoleProtectedRoute({ user, allowedRoles }) {
  if (!user) return ;
  if (!allowedRoles.includes(user.role)) return ;
  return ;
}

// Example route idea:
// }>
//   } />
// 

Common Mistakes

• Protecting only the UI, not the route: Hiding a link is not enough. Always guard the actual route component too.
• Using local storage as the only source of truth: It can help persist state, but validation should come from trusted auth logic or the server.
• Forgetting loading states: If auth status is still being checked, users may be redirected too early. Show a loading screen first.
• Ignoring roles: Logged-in users are not always equal. Add role checks when needed.

Best Practices

• Keep authentication state in context or a central store for easy access across routes.
• Use reusable wrapper components like ProtectedRoute and RoleProtectedRoute.
• Redirect users back to their intended page after successful login.
• Combine frontend route protection with backend authorization for real security.
• Create clear pages for /login and /unauthorized to improve user experience.

Practice Exercises

• Create a ProtectedRoute component that redirects unauthenticated users from /profile to /login.
• Add a loading state so the route waits before deciding whether to render or redirect.
• Build an admin-only route that allows access to /admin only when the user role is admin.

Mini Project / Task

Build a small React app with three pages: Home, Login, and Dashboard. Make Dashboard accessible only to logged-in users. After login, redirect the user back to Dashboard automatically.

Challenge (Optional)

Extend your protected routing system to support both authentication and multiple roles such as user, editor, and admin, with different access rules for separate pages.

Fetching Data

Fetching data in React means requesting information from an external source such as a REST API, backend server, or third-party service, then displaying that information inside components. This exists because most real applications do not rely only on hardcoded values. A shopping app loads products, a weather app loads forecasts, and a project dashboard loads tasks from a server. In React, data fetching is commonly handled after a component renders, often with the useEffect hook and browser APIs like fetch(). The main idea is simple: start with an initial state, request data asynchronously, update state when the response arrives, and reflect loading or error conditions in the UI.

A beginner should understand several related concepts. First, asynchronous code means the app continues running while waiting for a server response. Second, state stores values such as fetched results, loading flags, and error messages. Third, side effects are actions that interact with the outside world, which is why data fetching belongs in useEffect instead of directly in the component body. Common sub-types include one-time fetch on mount, fetching when a value changes such as a search term or ID, parallel fetching of multiple resources, and conditional fetching based on user interaction. React apps may also use libraries like Axios, React Query, or SWR, but understanding native fetch() first builds strong fundamentals.

Step-by-Step Explanation

Start by creating state variables with useState for the data, loading status, and possible error. Next, use useEffect so the request runs at the correct time. Inside the effect, call fetch(url), convert the response with response.json(), and save the result into state. Before the request starts, set loading to true. If the request succeeds, store the data and clear any old error. If it fails, save an error message. Finally, set loading to false so the UI can stop showing a loading indicator. If your request depends on a prop or state value, place that value in the dependency array so the effect reruns when the value changes.

Comprehensive Code Examples

import { useEffect, useState } from 'react';

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        if (!response.ok) throw new Error('Failed to fetch users');
        return response.json();
      })
      .then((data) => setUsers(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error}
;

  return (
    

      {users.map((user) => (
        
{user.name}

      ))}
    

  );
}

import { useEffect, useState } from 'react';

function ProductSearch() {
  const [query, setQuery] = useState('phone');
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function loadProducts() {
      const response = await fetch(`/api/products?search=${query}`);
      const data = await response.json();
      setProducts(data);
    }

    loadProducts();
  }, [query]);

  return (
    
Found {products.length} products for {query}

  );
}

import { useEffect, useState } from 'react';

function Dashboard() {
  const [data, setData] = useState({ users: [], posts: [] });

  useEffect(() => {
    async function loadDashboard() {
      const [usersRes, postsRes] = await Promise.all([
        fetch('/api/users'),
        fetch('/api/posts')
      ]);

      const [users, posts] = await Promise.all([
        usersRes.json(),
        postsRes.json()
      ]);

      setData({ users, posts });
    }

    loadDashboard();
  }, []);

  return 
Users: {data.users.length} | Posts: {data.posts.length}
;
}

Common Mistakes

• Fetching inside the component body: this causes repeated requests on every render. Put it inside useEffect.
• Ignoring loading state: users see empty content and think the app is broken. Show a loading message or spinner.
• Not handling errors: failed requests can crash logic or confuse users. Use try/catch or .catch() and display feedback.
• Missing dependencies: if the fetch depends on a value, add it to the dependency array.

Best Practices

• Keep separate state for data, loading, and error.
• Check response.ok before parsing JSON.
• Use async functions inside useEffect for readability.
• Extract fetch logic into reusable custom hooks when multiple components need it.
• Avoid unnecessary refetching by choosing dependencies carefully.

Practice Exercises

• Create a component that fetches and displays a list of post titles from a public API.
• Add loading and error states to an existing fetch example.
• Build a user details component that refetches data when a user ID changes.

Mini Project / Task

Build a simple React page that fetches products from an API and displays product names, prices, a loading message, and an error message if the request fails.

Challenge (Optional)

Create a search-driven component that fetches filtered results whenever the search term changes, while keeping the UI responsive and avoiding unnecessary requests.

Axios and HTTP Requests

Axios is a popular JavaScript library used to send HTTP requests from React applications to servers, APIs, and backend services. In real-world apps, React rarely works alone. It often needs data such as user profiles, products, blog posts, analytics, or form submission results. HTTP requests are the bridge between the frontend and the backend. Axios exists to make this communication easier, cleaner, and more consistent than using low-level browser tools directly. It supports common request methods such as GET, POST, PUT, PATCH, and DELETE. In React, Axios is commonly used inside useEffect for loading data when a component mounts, or inside event handlers when a user submits a form. Important ideas include request methods, response objects, asynchronous code with async/await, error handling, headers, query parameters, and reusable Axios instances. A GET request fetches data, POST sends new data, PUT or PATCH updates existing data, and DELETE removes data. Axios returns a promise, so React developers must handle loading, success, and failure states carefully to give users a smooth experience.

Step-by-Step Explanation

First, install Axios with npm install axios. Next, import it into a component using import axios from 'axios'. To fetch data when a page loads, create state values for data, loading, and error. Then use useEffect and call an async function that awaits axios.get(url). The response object usually contains useful data in response.data. For sending data, use axios.post(url, payload). To include custom headers such as tokens, pass a third configuration object like { headers: { Authorization: 'Bearer token' } }. Query parameters can be added with params, which keeps URLs cleaner and easier to maintain. In React, always update UI state after the request finishes so users can see loading spinners, success messages, or errors. This pattern makes components predictable and easy to debug.

Comprehensive Code Examples

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        setUsers(response.data);
      } catch (err) {
        setError('Failed to load users');
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (loading) return 
Loading...
;
  if (error) return 
{error}
;

  return (
    

      {users.map(user => (
        
{user.name}

      ))}
    

  );
}

export default Users;

import React, { useState } from 'react';
import axios from 'axios';

function AddPost() {
  const [title, setTitle] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await axios.post('https://jsonplaceholder.typicode.com/posts', { title });
      setMessage('Post created successfully');
      setTitle('');
    } catch (error) {
      setMessage('Failed to create post');
    }
  };

  return (
    
       setTitle(e.target.value)} />
      Save
      
{message}

    
  );
}

export default AddPost;

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    Authorization: 'Bearer my-token'
  }
});

export const getProducts = () => api.get('/products', { params: { limit: 10 } });
export const deleteProduct = (id) => api.delete(`/products/${id}`);

Common Mistakes

• Forgetting error handling: Always use try/catch or .catch() so failed requests do not break the UI.
• Using response incorrectly: Axios data is usually in response.data, not directly in response.
• Triggering infinite requests: Be careful with useEffect dependencies or the component may fetch repeatedly.
• Ignoring loading state: Users need visual feedback while data is being fetched.

Best Practices

• Create a reusable Axios instance for shared base URLs, headers, and configuration.
• Store loading, success, and error states separately for clearer UI behavior.
• Keep API logic in service files when applications grow larger.
• Use async/await for readable asynchronous code.
• Validate and sanitize user input before sending requests.

Practice Exercises

• Create a React component that fetches and displays a list of posts from a public API.
• Build a form that sends a POST request and shows a success or error message.
• Make a component with loading, error, and success states for a GET request.

Mini Project / Task

Build a small user directory that fetches users from an API, displays them in a list, and includes a form to add a new user with Axios.

Challenge (Optional)

Create a reusable API module with an Axios instance and use it across multiple React components for fetching, creating, and deleting resources.

Loading and Error States

Loading and error states are essential parts of any React application that fetches data, submits forms, or waits for asynchronous work to finish. In real applications, data does not arrive instantly. A product list may take a second to load, a profile request may fail because of a network issue, or a form submission may return a server error. Without proper handling, users see empty screens, broken layouts, or confusing behavior. Loading states communicate that work is in progress, while error states explain when something went wrong and often guide the user toward recovery.

In React, these states are usually managed with component state such as isLoading, error, and the final data value. A common pattern is to track three phases: loading, success, and failure. Some apps also include empty states, such as when a request succeeds but returns no results. These patterns appear everywhere: dashboards, search pages, checkout flows, chat apps, and admin panels.

Step-by-Step Explanation

A beginner-friendly way to handle async UI in React is to create state variables. First, store the returned data. Second, create a loading flag set to true before the request starts. Third, store an error message or object if the request fails. In a useEffect, start the fetch, clear old errors, and update the UI when the request completes. Then use conditional rendering to show different content.

Typical flow:
1. Set loading to true.
2. Clear previous error.
3. Start async request.
4. If successful, save data.
5. If failed, save error.
6. Set loading to false.

You can render states in order of priority. If loading is true, show a spinner or loading text. If there is an error, show an error message and possibly a retry button. If there is data, render it. If the data array is empty, show a friendly empty state. This approach keeps the interface predictable and easy to maintain.

Comprehensive Code Examples

Basic example

import { useEffect, useState } from 'react';

function Users() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        if (!response.ok) throw new Error('Failed to fetch users');
        return response.json();
      })
      .then((data) => setUsers(data))
      .catch((err) => setError(err.message))
      .finally(() => setIsLoading(false));
  }, []);

  if (isLoading) return 
Loading users...
;
  if (error) return 
Error: {error}
;

  return (
    

      {users.map((user) => (
        
{user.name}

      ))}
    

  );
}

Real-world example

import { useEffect, useState } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const loadProducts = async () => {
    try {
      setIsLoading(true);
      setError('');
      const response = await fetch('/api/products');
      if (!response.ok) throw new Error('Could not load products');
      const data = await response.json();
      setProducts(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

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

  if (isLoading) return 
Loading catalog...
;
  if (error) return 
{error}
Retry
;
  if (products.length === 0) return 
No products found.
;

  return (
    

      {products.map((product) => (
        
{product.name} - ${product.price}

      ))}
    

  );
}

Advanced usage

import { useEffect, useState } from 'react';

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  const [status, setStatus] = useState('idle');
  const [error, setError] = useState('');

  useEffect(() => {
    if (!query) return;

    const controller = new AbortController();

    const fetchResults = async () => {
      try {
        setStatus('loading');
        setError('');
        const response = await fetch(`/api/search?q=${query}`, { signal: controller.signal });
        if (!response.ok) throw new Error('Search failed');
        const data = await response.json();
        setResults(data);
        setStatus('success');
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
          setStatus('error');
        }
      }
    };

    fetchResults();
    return () => controller.abort();
  }, [query]);

  if (status === 'loading') return 
Searching...
;
  if (status === 'error') return 
{error}
;
  return 
{results.map((item) => 
{item.title}
)}
;
}

Common Mistakes

• Not checking response.ok: fetch does not throw for HTTP errors automatically. Manually throw an error when the response is not successful.
• Leaving loading stuck on true: always reset loading in a finally block or after both success and failure paths.
• Rendering data before it exists: guard against null, empty arrays, or undefined values before mapping or reading properties.
• Ignoring request cleanup: when inputs change quickly, use AbortController to prevent outdated responses from updating the UI.

Best Practices

• Use clear, user-friendly loading text or skeleton screens instead of blank space.
• Show actionable error messages and provide a retry option when possible.
• Separate loading, error, empty, and success states for predictable rendering.
• Use a status string like idle, loading, success, and error for more complex components.
• Keep state updates grouped and readable to make async logic easier to debug.

Practice Exercises

• Build a component that fetches a list of posts and shows a loading message before the data appears.
• Add error handling to a user profile component and display an error message if the request fails.
• Create an empty state for a todo list that says there are no tasks when the returned array is empty.

Mini Project / Task

Build a small weather search component that shows a loading message during the request, displays weather data on success, and shows a retryable error message when the API call fails.

Challenge (Optional)

Create a searchable React component that cancels previous requests when the user types quickly and correctly handles loading, error, success, and empty results states.

Context API

Context API is React’s built-in feature for sharing data across many components without passing props manually through every level of the component tree. This problem is often called prop drilling. For example, a logged-in user, theme mode, language setting, or shopping cart summary may be needed by deeply nested components. Instead of sending the same value through parent, child, grandchild, and deeper components, Context lets you place shared data in a central provider and read it wherever needed inside that provider tree.

In real applications, Context API is commonly used for theme switching, authentication state, app settings, notification systems, and small-to-medium global state needs. It is not always a replacement for all state management solutions, but it is excellent when multiple related components need access to the same value. The main parts are createContext, Provider, and consuming the context with useContext or a Consumer component. A context object stores a shared value. The Provider wraps a portion of your app and supplies that value. Any child component inside the Provider can access it directly.

There are two common ways to consume context. The modern approach is useContext(), which is simpler and used in function components. The older approach is Context.Consumer, which still works but is less common today. Context becomes even more useful when paired with state, because the Provider can expose both data and update functions. For instance, a theme context can share the current theme and a function to toggle between light and dark mode.

Step-by-Step Explanation

First, create a context using createContext(). Second, build a Provider component that stores shared state. Third, wrap the relevant part of your app with that Provider. Fourth, consume the context inside child components using useContext().

Syntax flow: define the context, provide a value prop on the Provider, then read that value from descendants. If the value changes, React re-renders consumers that use that context. A good beginner rule is: use context for data needed in many places, but keep local state local when only one component needs it.

Comprehensive Code Examples

Basic example

import React, { createContext, useContext } from 'react';

const MessageContext = createContext();

function App() {
  return (
    
      
    
  );
}

function Child() {
  const message = useContext(MessageContext);
  return 
{message}
;
}

Real-world example

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => setTheme(t => (t === 'light' ? 'dark' : 'light'));

  return (
    
      {children}
    
  );
}

function Toolbar() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    

      Current theme: {theme}
      

      Toggle
    

  );
}

export default function App() {
  return (
    
      
    
  );
}

Advanced usage

import React, { createContext, useContext, useMemo, useState } from 'react';

const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = name => setUser({ name });
  const logout = () => setUser(null);

  const value = useMemo(() => ({ user, login, logout }), [user]);

  return {children};
}

function Profile() {
  const { user, login, logout } = useContext(AuthContext);

  return user ? (
    
Welcome, {user.name} Logout

  ) : (
    
 login('Ava')}>Login

  );
}

Common Mistakes

• Using context for every piece of state. Fix: keep component-specific state local.
• Forgetting to wrap components with the Provider. Fix: place the Provider above all consumers.
• Passing a new object value on every render unnecessarily. Fix: memoize complex values with useMemo() when needed.
• Creating one huge context for unrelated data. Fix: split contexts by responsibility, such as AuthContext and ThemeContext.

Best Practices

• Use context for shared cross-component data, not all application state.
• Create custom hooks like useTheme() for cleaner consumption.
• Keep Provider logic focused and easy to test.
• Split contexts to reduce unnecessary re-renders and improve code clarity.

Practice Exercises

• Create a LanguageContext that stores the current language and displays it in two nested components.
• Build a ThemeContext with a button that switches between light and dark mode.
• Create a UserContext that stores a username and shows it in a profile component without prop drilling.

Mini Project / Task

Build a small dashboard with an AuthContext and ThemeContext. Show a login button, user greeting, theme status, and a toggle button that changes the shared theme for all nested components.

Challenge (Optional)

Create separate contexts for user settings and notifications, then design the component tree so only the components that need each context consume it efficiently.

Redux Introduction

Redux is a state management library used to store and control shared application data in one predictable place. In React, local component state works well for isolated features, but as applications grow, passing data through many layers of components becomes difficult. Redux was created to solve this problem by introducing a central store, strict update rules, and a clear data flow. It is commonly used in dashboards, e-commerce apps, authentication systems, analytics tools, and any interface where many components need access to the same data.

At its core, Redux follows a few important ideas. First, the entire shared state is kept inside a single store object. Second, state cannot be changed directly. Instead, you describe what happened by dispatching an action, which is a plain JavaScript object with a type. Third, reducers are functions that receive the current state and an action, then return a new state. This makes updates predictable, testable, and easier to debug. In modern React development, Redux is usually used through Redux Toolkit, which reduces boilerplate and provides simpler patterns for creating slices, reducers, and async logic.

There are also practical sub-types or building blocks you should understand. Store holds the global state. Actions describe events such as adding an item to a cart. Reducers decide how state changes in response to actions. Dispatch sends actions to the store. Selectors read specific values from state. In modern Redux Toolkit, slices group state, reducers, and generated actions together. You may also hear about middleware, which handles side effects like API calls and logging.

Step-by-Step Explanation

To use Redux in React, you typically install @reduxjs/toolkit and react-redux. First, create a slice with an initial state and reducer functions. Redux Toolkit automatically creates action creators for those reducers. Next, configure a store and register your slice reducer. Then, wrap your React app in the Provider component so every child can access the store. Inside components, use useSelector to read values and useDispatch to send actions.

The beginner-friendly flow is: user clicks a button, component dispatches an action, reducer updates state, React re-renders components using that state. This one-way data flow is the main reason Redux stays organized in larger applications.

Comprehensive Code Examples

import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; }
  }
});

export const { increment, decrement } = counterSlice.actions;
export const store = configureStore({ reducer: { counter: counterSlice.reducer } });

import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { store, increment, decrement } from './store';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      
Count: {count}

       dispatch(increment())}>Increase
       dispatch(decrement())}>Decrease
    

  );
}

export default function App() {
  return (
    
      
    
  );
}

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] },
  reducers: {
    addItem: (state, action) => {
      state.items.push(action.payload);
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload);
    }
  }
});

The first example shows the basic store and slice setup. The second shows React integration using hooks. The third reflects a real-world cart feature where many components may need shared access to cart data.

Common Mistakes

• Mutating state outside reducers: Always update Redux state through dispatched actions, not by editing values directly in components.
• Forgetting Provider: If your app is not wrapped with Provider, Redux hooks will not work.
• Using Redux for everything: Small local UI state like modal visibility often belongs in component state, not the global store.
• Writing overly large slices: Split unrelated features into separate slices for better structure.

Best Practices

• Use Redux Toolkit instead of older manual Redux patterns.
• Keep state minimal and store only shared, important data.
• Use selectors to read state cleanly and consistently.
• Name actions clearly, such as addItem or logoutUser.
• Organize by feature, placing slice files near related components and logic.

Practice Exercises

• Create a Redux counter with increment and decrement buttons.
• Build a theme slice with light and dark modes and display the current theme in a component.
• Create a todo slice that adds and removes tasks using Redux state.

Mini Project / Task

Build a small shopping cart state manager with Redux. Add products, remove products, and show the total number of items from different components.

Challenge (Optional)

Create a Redux-powered notes app with separate slices for notes and filters, then display only notes matching the selected filter.

Redux Toolkit

Redux Toolkit is the official, modern way to write Redux logic in React applications. Redux itself was created to solve a common frontend problem: when many components need to share and update the same data, passing props through many levels becomes hard to manage. Redux Toolkit simplifies this by giving you a central store, safer state updates, and built-in patterns for common tasks like async requests. In real applications, it is used for carts in e-commerce apps, user authentication, theme settings, dashboards, notifications, and API-driven data. Redux Toolkit reduces the older Redux boilerplate by providing configureStore, createSlice, and createAsyncThunk.

The main concepts are simple. A store holds global state. A slice is a focused part of that state, such as auth or cart. Reducers describe how state changes. Actions trigger those changes. Thunks handle async logic like fetching data from an API. Redux Toolkit also uses Immer internally, so you can write update logic that looks like mutation while staying immutable under the hood.

Step-by-Step Explanation

First, install the required packages: @reduxjs/toolkit and react-redux. Next, create a slice with a name, initial state, and reducers. Then create the store using configureStore and register your slice reducer. Wrap your React app with Provider so components can access the store. Inside components, use useSelector to read data and useDispatch to send actions. For API calls, create a thunk with createAsyncThunk and handle loading, success, and error states in extraReducers.

Comprehensive Code Examples

Basic example

import { configureStore, createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; }
  }
});
export const { increment, decrement } = counterSlice.actions;
export const store = configureStore({ reducer: { counter: counterSlice.reducer } });

import { Provider, useDispatch, useSelector } from 'react-redux';
function Counter() {
  const value = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  return (<>
    
Count: {value}

     dispatch(increment())}>+
     dispatch(decrement())}>-
  );
}

Real-world example

import { createSlice } from '@reduxjs/toolkit';
const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] },
  reducers: {
    addToCart: (state, action) => { state.items.push(action.payload); },
    removeFromCart: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload);
    }
  }
});

Advanced usage

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  return await res.json();
});
const usersSlice = createSlice({
  name: 'users',
  initialState: { list: [], loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => { state.loading = true; })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false; state.list = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.loading = false; state.error = action.error.message;
      });
  }
});

Common Mistakes

• Forgetting to wrap the app with Provider. Fix: wrap the root component and pass the store.

• Mutating state outside reducers. Fix: only update Redux state through slice reducers or thunks.

• Using wrong selector paths. Fix: match useSelector with the reducer key used in configureStore.

Best Practices

• Create one slice per feature, such as auth, cart, or users.

• Keep state minimal and derive computed values in selectors.

• Use thunks for async work and track loading and error states clearly.

• Export actions and reducer from the same slice file for organization.

Practice Exercises

• Create a Redux Toolkit counter with increment, decrement, and reset actions.

• Build a theme slice that switches between light and dark mode.

• Create a users slice that stores loading, data, and error for an API request.

Mini Project / Task

Build a shopping cart feature using Redux Toolkit where users can add items, remove items, and see the total number of products in the cart.

Challenge (Optional)

Create a task manager with two slices: one for tasks and one for filters. Add async loading for initial tasks and display only completed or pending tasks based on the selected filter.

React Query

React Query, now commonly known as TanStack Query, is a library for managing server state in React applications. Server state means data that comes from an external source such as a REST API, GraphQL endpoint, or backend service. In many apps, developers need to fetch data, show loading indicators, handle errors, cache responses, refresh stale data, and update the UI after creating or editing records. Doing all of that manually with useEffect and useState often leads to repetitive code and bugs. React Query exists to solve this problem by giving React developers a powerful and structured way to fetch, cache, synchronize, and update remote data.

In real projects, React Query is used in dashboards, admin panels, e-commerce product lists, user profiles, analytics screens, and any interface that depends on backend data. Its most important ideas include queries for reading data, mutations for changing data, query keys for identifying cached data, and invalidation for refetching outdated information. It also supports loading states, background refetching, retries, pagination, dependent queries, and optimistic updates. This makes applications feel faster and easier to maintain.

The main sub-types you should understand are queries and mutations. A query is used when you want to read data, such as fetching posts or users. A mutation is used when you want to create, update, or delete data, such as submitting a new todo item. Query keys are usually arrays like ['todos'] or ['user', userId] so React Query can cache data correctly. You also work with a QueryClient and QueryClientProvider to enable React Query across your app.

Step-by-Step Explanation

First, install the library and create a QueryClient. Second, wrap your React app in QueryClientProvider. Third, use useQuery to fetch data. It accepts an object with a unique queryKey and a queryFn that returns a promise. The hook gives you values such as data, isLoading, isError, and error. For writing data, use useMutation. After a successful mutation, you often call queryClient.invalidateQueries() so related data is refreshed.

Beginners should think of React Query as a smart data manager. You tell it what data you want and how to get it, and it handles caching and synchronization for you. This reduces boilerplate and improves performance.

Comprehensive Code Examples

Basic example

import React from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

const fetchPosts = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!res.ok) throw new Error('Failed to fetch posts');
  return res.json();
};

function Posts() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts
  });

  if (isLoading) return 
Loading...
;
  if (isError) return 
{error.message}
;

  return (
    

      {data.slice(0, 5).map(post => (
        
{post.title}

      ))}
    

  );
}

export default function App() {
  return (
    
      
    
  );
}

Real-world example

import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data, isLoading } = useQuery({
    queryKey: ['user', userId],
    queryFn: async () => {
      const res = await fetch(`/api/users/${userId}`);
      return res.json();
    },
    enabled: !!userId
  });

  if (isLoading) return 
Loading user...
;

  return 
Welcome, {data.name}
;
}

Advanced usage

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';

function Todos() {
  const queryClient = useQueryClient();

  const { data = [] } = useQuery({
    queryKey: ['todos'],
    queryFn: async () => {
      const res = await fetch('/api/todos');
      return res.json();
    }
  });

  const addTodo = useMutation({
    mutationFn: async (newTodo) => {
      const res = await fetch('/api/todos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newTodo)
      });
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    }
  });

  return (
    

       addTodo.mutate({ title: 'Learn React Query' })}>
        Add Todo
      
      

        {data.map(todo => 
{todo.title}
)}
      

    

  );
}

Common Mistakes

• Forgetting the provider: If you do not wrap the app with QueryClientProvider, hooks will not work. Always configure it at the root.
• Using weak query keys: A vague key like ['data'] causes confusion. Use descriptive keys such as ['products', categoryId].
• Not handling errors: Beginners often show only loading and success states. Always check isError and display a useful message.
• Skipping invalidation: After adding or updating data, the UI may stay stale unless you invalidate or update the cache.

Best Practices

• Keep API logic in reusable functions instead of writing fetch code everywhere.
• Use stable, descriptive query keys to organize cache entries clearly.
• Use enabled for dependent queries that should wait for required values.
• Prefer React Query for server state and React local state for UI-only values such as modals or form input.
• Configure stale times carefully to avoid unnecessary requests.

Practice Exercises

• Create a component that fetches and displays a list of 10 users with useQuery.
• Build a product details component that uses a dynamic query key based on product ID.
• Create a form that adds a new item using useMutation and refreshes the list after success.

Mini Project / Task

Build a small task manager that fetches tasks from an API, displays loading and error states, and lets the user add a new task with a mutation that refreshes the task list.

Challenge (Optional)

Create a paginated posts viewer where each page is cached separately, and the interface keeps previous data visible while the next page loads.

Styling in React

Styling in React is the process of controlling how components look, including colors, spacing, layout, typography, hover states, and responsive behavior. React itself focuses on building UI structure and logic, so styling is added using standard web technologies such as CSS, inline style objects, CSS Modules, and external styling libraries. This exists because applications need both behavior and presentation: a button must not only work, it must also look clickable, consistent, and accessible. In real projects, styling in React is used everywhere, from product cards and navigation bars to forms, dashboards, and theme-based interfaces.

There are several common ways to style React components. Traditional CSS files are simple and familiar: you create a CSS file, import it into a component, and use class names with the className attribute. Inline styles use JavaScript objects directly inside JSX, which is useful for dynamic values such as width, color, or conditional spacing. CSS Modules solve naming conflicts by scoping class names locally to a component. Developers also often combine conditional classes with JavaScript expressions to apply different visual states such as active, disabled, or error. Understanding when to use each approach is important for maintainability.

Step-by-Step Explanation

In React, you use className instead of HTML's class because JSX follows JavaScript naming conventions. For external CSS, first create a file like Button.css. Then import it using import './Button.css'. After that, assign the class with className="button".

For inline styling, pass a JavaScript object to the style prop. CSS property names become camelCase, so background-color becomes backgroundColor. Values can be strings or numbers depending on the property. For example, padding: 12 means 12 pixels.

For CSS Modules, create a file such as Card.module.css. Import it as an object, commonly named styles. Then apply classes with className={styles.card}. This prevents clashes with similarly named classes in other components.

Dynamic styling is also common. You can switch classes using conditions such as isActive ? 'tab active' : 'tab'. This makes it easy to reflect application state visually.

Comprehensive Code Examples

// Basic example: external CSS
import './App.css';

export default function App() {
  return <h1 className="title">Hello React Styling</h1>;
}

/* App.css */
.title {
  color: #61dafb;
  text-align: center;
}

// Real-world example: inline dynamic styles
export default function StatusBadge({ online }) {
  const badgeStyle = {
    backgroundColor: online ? 'green' : 'gray',
    color: 'white',
    padding: '8px 12px',
    borderRadius: '20px'
  };

  return <span style={badgeStyle}>{online ? 'Online' : 'Offline'}</span>;
}

// Advanced example: CSS Module with conditional class
import styles from './Card.module.css';

export default function ProductCard({ featured, name, price }) {
  return (
    <div className={`${styles.card} ${featured ? styles.featured : ''}`}>
      <h3>{name}</h3>
      <p>${price}</p>
    </div>
  );
}

/* Card.module.css */
.card {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.featured {
  border-color: orange;
  box-shadow: 0 0 10px rgba(255,165,0,0.3);
}

Common Mistakes

• Using class instead of className. Fix: always use className in JSX.
• Writing inline CSS property names with dashes. Fix: use camelCase like fontSize and backgroundColor.
• Forgetting to import the CSS file or CSS Module. Fix: import the style file at the top of the component.
• Mixing global CSS carelessly. Fix: prefer scoped naming or CSS Modules for reusable components.

Best Practices

• Use external CSS or CSS Modules for larger components instead of overusing inline styles.
• Use inline styles mainly for values that change dynamically at runtime.
• Keep class names meaningful, such as card, buttonPrimary, or errorText.
• Organize styles close to components to improve maintenance.
• Design with accessibility in mind, including contrast, focus states, and readable spacing.

Practice Exercises

• Create a heading component and style it with an imported CSS file using custom color, alignment, and font size.
• Build a button component that changes background color using inline styles based on a primary prop.
• Create a card component with CSS Modules and add a special bordered style when a featured prop is true.

Mini Project / Task

Build a small product list interface with three product cards. Use external CSS for layout, inline styles for dynamic stock indicators, and CSS Modules for each card's isolated design.

Challenge (Optional)

Create a theme switcher component that toggles between light and dark mode by applying different class names and a few dynamic inline style values for smooth visual feedback.

Performance Optimization

Performance optimization in React is the process of making applications render faster, use fewer resources, and stay responsive as the UI grows. React already provides efficient DOM updates through its reconciliation system, but real-world apps can still become slow when components re-render too often, heavy calculations run on every update, large lists appear on screen, or bundles grow too large. You will see this topic used in dashboards, ecommerce sites, admin panels, social feeds, and any application where users expect smooth interactions. The goal is not to optimize everything immediately, but to measure bottlenecks and improve the parts that matter most.

The main areas of React performance optimization include render optimization, computation optimization, list optimization, and delivery optimization. Render optimization reduces unnecessary component updates using tools such as React.memo, useMemo, and useCallback. Computation optimization avoids repeating expensive operations during renders. List optimization focuses on efficient handling of large collections through stable keys, pagination, and virtualization. Delivery optimization improves how code reaches the browser by splitting bundles and loading components lazily. A strong rule is this: first identify a real problem with React DevTools Profiler or browser performance tools, then apply the smallest useful fix.

Step-by-Step Explanation

Start by understanding why a component renders. A React component renders when its state changes, its parent renders, or its props change. If a parent re-renders, child components may also render even when visible output does not change. To reduce this, wrap pure child components with React.memo. This tells React to skip rendering when props are unchanged.

Next, use useMemo for expensive calculated values. If sorting, filtering, or transforming data is slow, compute it once and recompute only when dependencies change. Use useCallback when passing functions to memoized children so the function reference stays stable between renders.

For long lists, always provide stable keys such as database IDs, not array indexes when order can change. If the list is very large, render only visible rows with virtualization libraries like react-window. Finally, reduce initial load time with lazy loading. React.lazy and Suspense can load feature-heavy pages only when needed.

Comprehensive Code Examples

Basic example

import React, { useState, memo } from 'react';

const CounterDisplay = memo(function CounterDisplay({ count }) {
  console.log('CounterDisplay rendered');
  return 
Count: {count}
;
});

export default function App() {
  const [count, setCount] = useState(0);
  const [theme, setTheme] = useState('light');

  return (
    <>
      
       setCount(count + 1)}>Increment
       setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme
    
  );
}

Real-world example

import React, { useMemo, useState } from 'react';

export default function ProductSearch({ products }) {
  const [query, setQuery] = useState('');

  const filteredProducts = useMemo(() => {
    return products.filter(product =>
      product.name.toLowerCase().includes(query.toLowerCase())
    );
  }, [products, query]);

  return (
    <>
       setQuery(e.target.value)} placeholder='Search products' />
      

        {filteredProducts.map(product => (
          
{product.name}

        ))}
      

    
  );
}

Advanced usage

import React, { lazy, Suspense, useCallback, useState } from 'react';

const ReportsPage = lazy(() => import('./ReportsPage'));

function Toolbar({ onRefresh }) {
  return Refresh Data;
}

const MemoToolbar = React.memo(Toolbar);

export default function Dashboard() {
  const [showReports, setShowReports] = useState(false);

  const handleRefresh = useCallback(() => {
    console.log('Refreshing...');
  }, []);

  return (
    <>
      
       setShowReports(true)}>Open Reports
      {showReports && (
        Loading reports...
}>
          
        
      )}
    
  );
}

Common Mistakes

• Optimizing too early: Developers add memoization everywhere without measuring. Fix: profile first, then optimize real bottlenecks.
• Using unstable keys: Array indexes can cause incorrect re-renders in changing lists. Fix: use unique stable IDs.
• Overusing useCallback and useMemo: These hooks also have overhead. Fix: use them only when they prevent expensive work or help memoized children.

Best Practices

• Use React DevTools Profiler before and after each optimization.
• Keep state as local as possible to limit large render chains.
• Split large components into focused smaller components.
• Memoize only pure components with stable props.
• Lazy-load heavy routes, charts, editors, and admin features.

Practice Exercises

• Create a parent component with two buttons and a child display. Prevent the child from re-rendering when unrelated state changes.
• Build a searchable user list and optimize the filtering logic with useMemo.
• Create a component that passes a callback to a memoized child and stabilize the callback with useCallback.

Mini Project / Task

Build a product dashboard with a search box, category filter, and a lazily loaded analytics panel. Optimize repeated filtering and prevent unnecessary child renders.

Challenge (Optional)

Create a very large activity feed and design a strategy to keep scrolling smooth using stable keys, memoized row items, and list virtualization.

Final Project

Step-by-Step Explanation

Comprehensive Code Examples

npx create-react-app my-final-project
cd my-final-project

// src/components/Greeting.js
import React from 'react';

function Greeting({ name }) {
  return 
Hello, {name}! Welcome to your project!
;
}

export default Greeting;

// src/App.js
import React from 'react';
import Greeting from './components/Greeting';

function App() {
  return (
    

      
    

  );
}

export default App;

// src/components/DataFetcher.js
import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) return 
Loading data...
;
  if (error) return 
Error: {error.message}
;

  return (
    

      
Fetched Posts

      

        {data.map(post => (
          

            
{post.title}

            
{post.body}

          

        ))}
      

    

  );
}

export default DataFetcher;

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

// src/pages/Home.js
function Home() { return 
Welcome Home!
; }
// src/pages/About.js
function About() { return 
About Us Page
; }
// src/pages/Contact.js
function Contact() { return 
Contact Us Page
; }

function App() {
  return (
    
      
      
        } />
        } />
        } />
      
    
  );
}

export default App;

Common Mistakes

• Not breaking down the project into smaller components: Beginners often try to build a monolithic `App` component, leading to unmanageable code. Fix: Spend time planning your component hierarchy before coding.


• Ignoring state management best practices: Over-relying on local component state for global data or prop drilling excessively. Fix: Use Context API or Redux for global state; lift state up only when necessary for direct parent-child communication.


• Lack of error handling: Not handling network errors or unexpected API responses. Fix: Always include `try...catch` blocks with `async/await` or `.catch()` with Promises when fetching data, and display user-friendly error messages.

Best Practices

• Plan before you code: Sketch out your UI, define components, and consider data flow. A little planning saves a lot of refactoring.


• Modularize your code: Keep components small, focused, and reusable. Separate concerns (e.g., data fetching logic from rendering logic).


• Meaningful naming conventions: Use clear and consistent names for components, props, and state variables.


• Use functional components and Hooks: Embrace modern React practices. Hooks simplify stateful logic and side effects in functional components.


• Version control (Git): Commit frequently with descriptive messages. This is crucial for tracking changes and collaborating.


• Testing: Even for a final project, consider basic unit or integration tests for critical components.

Practice Exercises

• Create a simple task list application where users can add, delete, and mark tasks as complete. Use `useState` to manage the list of tasks.


• Build a basic weather app that fetches weather data for a hardcoded city from a public API (e.g., OpenWeatherMap – remember to get an API key) and displays it.


• Design a simple navigation bar with three links (`Home`, `Dashboard`, `Settings`) using `react-router-dom`. Each link should render a different component displaying its name.

Mini Project / Task

Challenge (Optional)