Count: {count}

  <p>Other Value: {otherValue}</p>
  <button onClick={() => setOtherValue(otherValue + 1)}>Increment Other Value</button>

  {/* Child component receives otherValue as prop */}
  <ChildComponent value={otherValue} />
</div>

); }

export default ParentComponent;

useMemo()

useMemo is a React hook that allows you to memoize the result of a function, and recompute the result only when the dependencies of the function have changed.

In simple terms, useMemo can be used to optimize the performance of your React components by avoiding unnecessary re-renders.

Let's go over an example to clarify how useMemo works and how it prevents unnecessary re-renders and recalculations. I'll walk you through step by step with and without useMemo.

Scenario:

You have a function that performs an expensive calculation, like squaring a large number. You want to display the result in a component, but you don't want to re-calculate it unless the input changes. Without useMemo, this expensive calculation will happen on every render, but with useMemo, it will only happen when necessary.

Example 1: Without useMemo

import React, { useState } from 'react';

function App() {
  const [number, setNumber] = useState(0);
  const [otherValue, setOtherValue] = useState(0);

  // Simulate an expensive calculation
  const expensiveCalculation = (num) => {
    console.log('Running expensive calculation...');
    for (let i = 0; i < 1000000000; i++) {}  // Time-consuming task
    return num * num;
  };

  // Calculate result every time component renders
  const result = expensiveCalculation(number);

  console.log("Component re-rendered");

  return (
    <div>
      <p>Number: {number}</p>
      <p>Expensive Calculation Result: {result}</p>
      <button onClick={() => setNumber(number + 1)}>Increment Number</button>
      <button onClick={() => setOtherValue(otherValue + 1)}>Increment Other Value</button>
    </div>
  );
}

export default App;

What Happens Without useMemo:

1. Every time you click either button ("Increment Number" or "Increment Other Value"), the entire component re-renders, and the expensive calculation runs again even if number hasn't changed.
2. You will see "Running expensive calculation..." in the console on every render.
3. Even when you click the "Increment Other Value" button, which doesn’t change number, the expensive calculation still runs.

Performance Issue:

This is a performance issue because the calculation is expensive (i.e., takes a lot of time), but it is being recalculated on every render, even when it's not necessary.

Example 2: With useMemo

Now let's use useMemo to avoid recalculating the expensive result unless number changes:

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

function App() {
  const [number, setNumber] = useState(0);
  const [otherValue, setOtherValue] = useState(0);

  // Simulate an expensive calculation
  const expensiveCalculation = (num) => {
    console.log('Running expensive calculation...');
    for (let i = 0; i < 1000000000; i++) {}  // Time-consuming task
    return num * num;
  };

  // Use useMemo to cache the result unless `number` changes
  const result = useMemo(() => expensiveCalculation(number), [number]);

  console.log("Component re-rendered");

  return (
    <div>
      <p>Number: {number}</p>
      <p>Expensive Calculation Result: {result}</p>
      <button onClick={() => setNumber(number + 1)}>Increment Number</button>
      <button onClick={() => setOtherValue(otherValue + 1)}>Increment Other Value</button>
    </div>
  );
}

export default App;

What Happens With useMemo:

1. The expensive calculation (expensiveCalculation(number)) will only run when number changes.
2. When you click the "Increment Number" button, number changes, so useMemo will recalculate the result.
3. When you click the "Increment Other Value" button, number doesn't change, so useMemo will return the cached result and skip the expensive calculation.
4. The component will still re-render when you click either button, but the calculation only happens when needed.

Let's Analyze:

Without useMemo:

1. Every time the component re-renders, the expensive calculation runs, even when the value of number hasn't changed.
2. This is inefficient because the result of the expensive calculation is the same until number changes, yet it's being recalculated unnecessarily.

With useMemo:

1. The expensive calculation only runs when the dependency (number) changes.
2. The component still re-renders, but useMemo ensures that the expensive calculation is skipped when it's not needed.

Testing and Observing Behavior:

Step-by-Step for Testing:

1. Open the browser console (F12) and go to the Console tab.
2. Run the app and observe:
   • When you click "Increment Number", both "Component re-rendered" and "Running expensive calculation..." will appear in the console.
   • When you click "Increment Other Value", only "Component re-rendered" will appear, but the expensive calculation is skipped because the value of number hasn't changed.

Visual Explanation of Avoiding Recalculations:

• Without useMemo, every button click triggers the expensive calculation, even when the calculation isn't needed.
• With useMemo, the expensive calculation only runs when number changes, significantly improving performance.

Summary of Key Differences:

In summary, useMemo is a React hook that can be used to memoize the result of a function and optimize the performance of your components. By avoiding unnecessary re-renders, you can create faster and more efficient React applications.

useCallback

useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.

In simple terms, useCallback can be used to optimize the performance of your React components by avoiding unnecessary re-renders of child components. Certainly! Let's break down the useCallback hook, how it works, and how it differs from useMemo. I'll explain when to use it, provide an example, and show why it's useful for performance optimization in React.

What is useCallback?

• useCallback is a React hook that returns a memoized version of a function.
• It only creates a new function if its dependencies change.
• Purpose: To avoid unnecessary re-creation of functions during re-renders, especially when passing callbacks to child components that could cause those components to re-render unnecessarily.

Key Difference Between useMemo and useCallback:

• useMemo: Memoizes the result of a computation.
• useCallback: Memoizes the function itself.

Scenario for useCallback:

Imagine a parent component that passes a function as a prop to a child component. Each time the parent re-renders, a new instance of that function is created, which could cause the child to unnecessarily re-render. useCallback helps prevent this by ensuring the same function instance is reused unless its dependencies change.

Example: Without useCallback

Here’s an example of a parent component passing a function (handleClick) to a child component without using useCallback.

Parent Component (without useCallback):

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [otherValue, setOtherValue] = useState(0);

  // Function that gets passed to the child
  const handleClick = () => {
    console.log('Button clicked!');
  };

  console.log('Parent re-rendered');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setOtherValue(otherValue + 1)}>Increment Other Value</button>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

Child Component:

import React from 'react';

function ChildComponent({ handleClick }) {
  console.log('Child re-rendered');

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

export default ChildComponent;

What Happens Without useCallback:

1. Parent re-renders when you click either the "Increment Count" or "Increment Other Value" buttons.
2. On every re-render, handleClick is recreated as a new function, even though the logic inside it doesn’t change.
3. Because the parent is passing a new instance of handleClick to the child, the child component re-renders unnecessarily every time the parent re-renders, even though the child's props haven't logically changed.
4. You'll see both "Parent re-rendered" and "Child re-rendered" logs in the console every time either button is clicked.

Example: With useCallback

Now let's use useCallback to memoize the handleClick function so that the child only re-renders when handleClick truly changes.

Parent Component (with useCallback):

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [otherValue, setOtherValue] = useState(0);

  // Memoize the handleClick function using useCallback
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);  // No dependencies, so the function is memoized once

  console.log('Parent re-rendered');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setOtherValue(otherValue + 1)}>Increment Other Value</button>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

What Happens With useCallback:

1. handleClick is memoized. It is created once and stored in memory.
2. Every time the parent re-renders (when either button is clicked), handleClick remains the same unless its dependencies change.
3. Since handleClick is the same function instance on re-renders, the child component doesn’t re-render unless handleClick or other props change.
4. In the console, you'll only see "Child re-rendered" on the initial render, but not when the parent re-renders due to changes in count or otherValue.

Key Points About useCallback:

When to Use:

• Use useCallback when you are passing functions as props to child components and you want to avoid unnecessary re-renders.
• It's especially useful when the parent component frequently re-renders, but the function being passed down doesn’t change often.

How It Works:

• useCallback(() => fn, [dependencies]) memoizes a function so that it is only re-created if its dependencies change.
• If the dependencies array is empty ([]), the function is only created once and reused on every re-render.

Avoiding Unnecessary Child Re-renders:

• Without useCallback, a new function is created on each re-render. If this function is passed to a child as a prop, the child will think its props have changed and will also re-render.
• With useCallback, the function remains the same instance across renders, preventing the child from unnecessarily re-rendering.

Example: useCallback with Dependencies

Sometimes, the function might depend on a variable from the parent component's state. In this case, you pass that variable as a dependency to useCallback.

const handleClick = useCallback(() => {
  console.log(`Button clicked! Count is ${count}`);
}, [count]);  // Now handleClick will change whenever `count` changes

• Explanation: The handleClick function depends on count. With useCallback, it will only be recreated when count changes. This ensures the child component only receives a new handleClick function when it's actually different.

Summary of useCallback:

When Should You Use useCallback?

• When a function is passed as a prop to a child component, and you want to avoid re-rendering the child unnecessarily.
• When you have performance concerns related to creating new functions on every render.

In summary, useCallback is a React hook that can be used to memoize a function and optimize the performance of your components. By avoiding unnecessary re-creation of functions, you can create faster and more efficient React applications.

useReducer

useReducer is a React hook that provides a way to manage complex state logic in functional components. It is an alternative to useState for managing state that involves multiple sub-values or when the next state depends on the previous one. It does very similiar to setState, It's a different way to manage state using Redux Pattern. Instead of updating the state directly, we dispatch actions, that go to a reducer function, and this function figure out, how to compute the next state.

Uses of useReducer:

• Managing Complex State Logic: useReducer is particularly useful when the state logic becomes complex, involving multiple sub-values or requiring computation to determine the next state.

• State Transitions: It helps in handling more advanced state transitions by providing a function that takes the current state and an action, and returns the new state.

• Local Component State: While useState is often sufficient for local component state, useReducer can be more suitable when dealing with complex state management.

Difference Between useState and useReducer:

• useState:

  • Simple and straightforward for managing local component state.
  • Suitable for managing independent and atomic state variables.
  • Good for basic scenarios where state transitions are simple.

• useReducer:

  • More suitable for complex state logic and when state transitions involve multiple sub-values.
  • Reducer function takes the current state and an action, returns the new state.
  • Better for managing state in a more predictable and scalable way.

import React,{useReducer} from 'react'

const initialState  = 0;

const reducer=(state,action)=>{
    if(action.type==="increment"){
        return state+1
    }
    if(action.type==="decrement"){
        return state-1
    }
    if(action.type==="reset"){
        return 0
    }
}

const Demo = () => {

    const[state,dispatch]  = useReducer(reducer,initialState)

  return (
    <div>
        <h1>{state}</h1>
        <button onClick={()=>dispatch({type:"increment"})}>INC</button>
        <button onClick={()=>dispatch({type:"decrement"})}>DEC</button>
        <button onClick={()=>dispatch({type:"reset"})}>Reset</button>
    </div>
  )
}

export default Demo

import React, { useReducer } from 'react';

// Reducer function
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: 0 };
    default:
      return state;
  }
};

const CounterComponent = () => {
  // useReducer returns current state and dispatch function
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const handleDecrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  const handleReset = () => {
    dispatch({ type: 'RESET' });
  };

  return (
    <div>
      <h2>Count: {state.count}</h2>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
};

export default CounterComponent;

 function App() { 
  const initial = 0; 
  const reducer = (state, action) => { 
    switch (action) { 
      case "add": return state + 1; 
      case "sub": return state - 1; 
      case "reset": return 0; 
      default: return 0; 
    } 
  } 
  const [value, dispatch] = useReducer(reducer, initial) return ( 
    <div> 
    <h2>{value}</h2> 
    <button onClick={() => dispatch("add")}>Add</button> 
    <button onClick={() => dispatch("sub")}>subtract</button> 
    <button onClick={() => dispatch("reset")}>reset</button> 
    </div> 
    ); 
  }

In this example, The component initializes a constant initial with a value of 0. This is the initial value for the state managed by the useReducer hook. The component also defines a reducer function, which takes in the current state and an action object, and returns a new state based on the action.

The reducer function used in this component has a switch statement that checks the type of action passed in, and returns the updated state based on the action. In this case, there are three possible actions: "add", "sub", and "reset".

If the action is "add", the reducer returns the current state plus one. If the action is "sub", the reducer returns the current state minus one. If the action is "reset", the reducer returns the initial value of 0.

The useReducer hook is used to initialize a state variable called value with the initial value of 0, and a dispatch function that allows you to dispatch actions to the reducer. The useReducer hook takes two arguments: the reducer function and the initial state value.

The component returns a div that contains an h2 element that displays the current value of value, and three buttons that dispatch the corresponding actions to the reducer when clicked.

When the buttons are clicked, the dispatch function is called with the appropriate action object, and the useReducer hook updates the state based on the action. The h2 element is re-rendered with the updated value of value.

How to make Custom Hooks?

In many cases, if you want to add a certain feature to your application, you can simply install a third-party library that is made to solve your problem. But if such a library or hook doesn't exist? Then it's important to learn the process of creating custom hooks to solve problems or add missing features within your own React projects.

useCustomCounter Hook

//useCustomCounter.js

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

const useCustomCounter = (initialValue,componentName) => {
    const [counter,setCounter] = useState(initialValue)
    
    function counterApp(){
        setCounter(counter+1)
    }
    useEffect(()=>{
        console.log(componentName+"is clicked"+counter+"times")
    },[counter,componentName])

  return counterApp;
}

export default useCustomCounter;

//FirstComponent.js
import React from 'react'
import useCustomCounter from './UseCustomCounter'

const FirstComponent = () => {

    const clickedOne = useCustomCounter(0,"FirstComponent")

  return (
    <div>
        <h2>This is my first component</h2>
        <button onClick={clickedOne}>Click</button>
    </div>
  )
}

export default FirstComponent

// SecondComponent.js

import React from 'react'
import useCustomCounter from './UseCustomCounter'

const SecondComponent = () => {

    const counterTwo = useCustomCounter(2,"secondComponent") 
  return (
    <div>
        <h2>This is my second component</h2>
        <button onClick={counterTwo}>Click</button>
    </div>
  )
}

export default SecondComponent

DAY-9

Routing

What is a React Router ?

• React Router is a powerful routing library built on top of React that helps to flow your application incredibly quickly, while keeping the URL in sync with what's being displayed on the page.

• When a user types a specific URL into the browser, and if this URL path matches any 'route' inside the router file, the user will be redirected to that particular route.

• React Router Dom is used to build applications that have many pages or components but the page is never refreshed instead the content is dynamically fetched based on the URL

Q.What is the difference between react-router and react-router-dom ?

In React Router v4, the React Router was broken into two: react-router and react-router-dom. react-router is the core, and react-router-dom is the core plus the React Router elements such as <BrowserRouter> and <NavLink> Since react-router-dom is like a super-set of react-router, you only need to import react-router-dom.

What is BrowserRouter ?

BrowserRouter is responsible for understanding the url and then going ahead and ensuring that ui that we have or component we have is as per that particular url

Installation

npm i react-router-dom

What is Routes ?

The Routes component is used to define the routes for your application. It takes one or more Route components as its children and renders the first Route that matches the current URL. If none of the Route components match the current URL, the Routes component renders nothing.

What is Route ?

The Route component is used to define a single route in your application. It takes two props: path and element. The path prop specifies the URL pattern that the Route should match, and the element prop specifies the component that should be rendered when the Route matches.

What is path ?

The path prop is used to specify the URL pattern that a Route should match. It can be a string or a regular expression that matches the desired URL pattern. For example, if you want to match the URL /about with a Route, you would set the path prop to "/about".

What is Link in React ?

Link is a primary way to allow users to navigate around your application from page to another without loading The difference between link and anchor tag is that

● anchor tag when we navigate to another page there is a loading happen

● Link when we navigate to another page through link the page will not load.

How to use links in React ?

Initially we are on Home page , on click of Home we move to about page and there is a change in url(localhost:3000/about)

Types of Routing in React

React Router provides several types of routers for different use cases. The most commonly used routers are:

1. BrowserRouter
2. HashRouter
3. MemoryRouter
4. StaticRouter (used mostly for server-side rendering)
5. NativeRouter (used in React Native)

Here lets take one simple example how to perform routing . We are taking 3 pages Home, About, Contact. And i place them in ul tag as a link so that whwnever we click on particular link it will redirect to that page.

#index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>   
  </React.StrictMode>
);

#App.js

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

function App() {
  return (
    <>
     <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/contact">Contact</Link></li>
    </ul>
  
    <Routes>
      <Route path="/"  element={<Home/>}/>
      <Route path="/about"  element={<About/>} />
      <Route path="/contact"  element={<Contact/>}/>
    </Routes>
    </>
  );
}
export default App;

./component/Home.js

import React from "react"

const Home=()=>{
    return (
        <>
        Home
        </>
    )
}

export default Home

./component/About.js

import React from "react"

const About=()=>{
    return (
        <>
        About
        </>
    )
}
export default About

./component/Contact.js

import React from 'react'

const Contact = () => {
  return (
    <div>Contact</div>
  )
}

export default Contact

Output:

2. HashRouter

HashRouter uses the hash portion of the URL (the part after #) to keep track of routing. For example, the URL might look like http://example.com/#/about. Everything after # is handled client-side and not sent to the server.

Example of HashRouter:

import React from "react";
import { HashRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
};

export default App;

• Pros: No need to configure the server; it works even if the server doesn’t handle client-side routes.
• Cons: The # in the URL can be less clean and not as SEO-friendly.

3. MemoryRouter

MemoryRouter keeps the URL history in memory (it doesn’t read or write to the address bar). This is useful for non-browser environments or testing purposes, or when the app doesn’t need to interact with the browser URL.

Example of MemoryRouter:

import React from "react";
import { MemoryRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

const App = () => {
  return (
    <Router initialEntries={['/']}>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
};

export default App;

• Pros: Great for unit tests and non-browser environments.
• Cons: Does not affect the browser URL, so it’s not useful for typical web applications.

4. StaticRouter

StaticRouter is mainly used for server-side rendering (SSR). It doesn’t change the URL and is generally used to render the app on the server before sending HTML to the client.

Example of StaticRouter (typically used in server-side environments):

import React from "react";
import { StaticRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

const App = ({ location }) => {
  return (
    <Router location={location}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
};

export default App;

• Pros: Great for server-side rendering where the app is rendered to static HTML.
• Cons: Cannot be used in a client-side environment (i.e., it’s purely for server rendering).

5. NativeRouter (React Native)

If you are working with React Native (for mobile apps), you would use NativeRouter instead of BrowserRouter or HashRouter. It’s provided by react-router-native for mobile applications.

import React from 'react';
import { NativeRouter, Routes, Route, Link } from 'react-router-native';
import { Text, View } from 'react-native';

const Home = () => <Text>Home Page</Text>;
const About = () => <Text>About Page</Text>;

const App = () => (
  <NativeRouter>
    <View>
      <Link to="/"><Text>Home</Text></Link>
      <Link to="/about"><Text>About</Text></Link>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </View>
  </NativeRouter>
);

export default App;

• Pros: Works well with React Native’s navigation system.
• Cons: Limited to mobile apps (React Native only).

Summary of Use Cases:

• BrowserRouter: Best for web apps where you want clean URLs without #. It requires server-side support.
• HashRouter: Good for apps where you can’t control the server (e.g., GitHub Pages).
• MemoryRouter: Used in testing or non-browser environments.
• StaticRouter: Great for server-side rendering (SSR).
• NativeRouter: Used in React Native apps for mobile navigation.

a. NavLink in React Router:

NavLink is a component provided by React Router that is similar to Link, but it allows you to style the link based on whether it matches the current URL. It's commonly used for navigation menus where you want to highlight the active link.

Some of the key properties include:

1. isActive: Determines if the link is currently active (as we discussed before).
2. className: Dynamically sets the className of the NavLink based on whether it is active.
3. style: Dynamically sets the inline style of the NavLink based on whether it is active.
4. to: Specifies the target route for the link.
5. state: Passes extra state information to the route.

1. isActive (Automatically Passed as an Argument)

• Purpose: As we've seen, isActive is automatically passed to the className and style functions to help determine if the link is active.

Example (Recap):

<NavLink
  to="/home"
  style={({ isActive }) => ({ color: isActive ? "yellow" : "white" })}
>
  Home
</NavLink>

2. className

• Purpose: You can dynamically set a CSS class based on whether the NavLink is active or not. This is similar to how style works but allows you to define more complex styling rules using external CSS.

Example:

<NavLink
  to="/home"
  className={({ isActive }) => (isActive ? "active-link" : "inactive-link")}
>
  Home
</NavLink>

In your CSS file:

.active-link {
  font-weight: bold;
  color: yellow;
}

.inactive-link {
  color: white;
}

Here, active-link will be applied when the route is active, and inactive-link will be applied when it's not.

3. style

• Purpose: You can directly apply inline styles based on whether the NavLink is active or not. We've seen this in earlier examples.

Example:

<NavLink
  to="/about"
  style={({ isActive }) => ({
    textDecoration: isActive ? "underline" : "none",
    color: isActive ? "green" : "gray",
  })}
>
  About
</NavLink>

4. to

• Purpose: The to prop specifies the target route for the link. It can be a string representing the path or an object for more complex configurations (e.g., handling query parameters, hashes, etc.).

Examples:

// Basic usage
<NavLink to="/profile">Profile</NavLink>

// Using an object with query and hash
<NavLink to={{ pathname: "/profile", search: "?name=John", hash: "#details" }}>
  Profile with Query and Hash
</NavLink>

In the second example, the URL would be /profile?name=John#details.

5. state

• Purpose: The state prop allows you to pass additional state data to the route you're navigating to. This data can be accessed by the target component through the useLocation hook.

Example:

<NavLink to="/dashboard" state={{ from: "home" }}>
  Dashboard
</NavLink>

• In this example, when you navigate to the /dashboard route, you can retrieve the state ({ from: "home" }) using useLocation in the target component.

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

const Dashboard = () => {
  const location = useLocation();
  console.log(location.state); // Output: { from: "home" }
  return <div>Dashboard Page</div>;
};

Full Example Using Different NavLink Properties

import React from 'react';
import { NavLink } from 'react-router-dom';
import './Navbar.css'; // Assume we have some CSS for active/inactive links

const Navbar = () => {
  return (
    <nav>
      <NavLink
        to="/"
        end
        className={({ isActive }) => (isActive ? "active-link" : "inactive-link")}
      >
        Home
      </NavLink>

      <NavLink
        to="/about"
        className={({ isActive }) => (isActive ? "active-link" : "inactive-link")}
        style={({ isActive }) => ({ fontWeight: isActive ? "bold" : "normal" })}
      >
        About
      </NavLink>

      <NavLink
        to="/contact"
        state={{ from: "navbar" }}
        className={({ isActive }) => (isActive ? "active-link" : "inactive-link")}
      >
        Contact
      </NavLink>

      <NavLink
        to="/profile"
        replace
        className={({ isActive }) => (isActive ? "active-link" : "inactive-link")}
      >
        Profile (Replace)
      </NavLink>
    </nav>
  );
};

export default Navbar;

CSS (Navbar.css):

.active-link {
  color: yellow;
  text-decoration: underline;
}

.inactive-link {
  color: white;
  text-decoration: none;
}

What Happens in the Example:

1. Home: Will only be active on the exact / route because of the end prop.
2. About: If it's active, it will be bolded using the inline style prop.
3. Contact: Sends additional state { from: "navbar" } to the /contact route.
4. Profile (Replace): Navigating to /profile will replace the current history entry instead of pushing a new one.

Summary:

• isActive: Used to conditionally style or apply classes based on whether the link is active.
• end: Ensures the link is only active for exact matches.
• className and style: Dynamically apply CSS classes or inline styles.
• to: Specifies the target path, and can handle complex URLs (e.g., with query parameters or hashes).
• replace: Replaces the current entry in history instead of pushing a new one.
• state: Passes additional state to the route, which can be accessed in the destination component.

What is the useParams() Hook in React Router?

The useParams() hook is a part of React Router that allows you to access URL parameters in your components. URL parameters are dynamic values embedded in the URL, and useParams() enables you to extract and use them.

For example, in a URL like /user/123, 123 is a parameter that can represent a user ID. The useParams() hook lets you grab this dynamic value and use it within your component logic.

When to Use useParams():

• When you have dynamic routes and want to retrieve the values of the dynamic parts of the URL.
• Typically used in detail pages, where the page is designed to show details about a specific entity (e.g., user, product, post, etc.), based on its ID or slug in the URL.

How to Use useParams()

1. Setting Up the Route:

First, define a route in your App.js or router setup that includes route parameters.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import UserDetails from './UserDetails';

function App() {
  return (
    <Router>
      <Routes>
        {/* Dynamic route with a parameter `id` */}
        <Route path="/user/:id" element={<UserDetails />} />
      </Routes>
    </Router>
  );
}

export default App;

• :id in the route /user/:id represents a dynamic URL parameter. Whatever value is placed in the id part of the URL (e.g., /user/123) will be accessible inside the UserDetails component.

2. Using useParams() in the Component:

In the component (e.g., UserDetails.js), use the useParams() hook to access the dynamic id from the URL.

import React from 'react';
import { useParams } from 'react-router-dom';

function UserDetails() {
  // Extract the dynamic part of the URL
  const { id } = useParams();

  return (
    <div>
      <h1>User Details</h1>
      <p>User ID: {id}</p>
      {/* You can use the `id` to fetch user details from an API, etc. */}
    </div>
  );
}

export default UserDetails;

• useParams() returns an object where the keys correspond to the named parameters in the route (e.g., id in this case), and the values are the actual values from the URL.

Example Walkthrough:

• If the URL is /user/123, the useParams() hook will return { id: '123' }.
• You can now use id in the UserDetails component to display or fetch user-specific data (e.g., calling an API to fetch the user with ID 123).

Different Scenarios for Using useParams()

1. Multiple Parameters in the URL

You can have multiple dynamic parameters in the URL, such as /category/:categoryId/product/:productId.

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

function ProductDetails() {
  const { categoryId, productId } = useParams();

  return (
    <div>
      <h1>Product Details</h1>
      <p>Category ID: {categoryId}</p>
      <p>Product ID: {productId}</p>
      {/* You can now use `categoryId` and `productId` to fetch data */}
    </div>
  );
}

• For a URL like /category/electronics/product/456, the useParams() hook will return:

  { categoryId: 'electronics', productId: '456' }
  

2. Optional Parameters

You can have optional parameters in the URL by adding a question mark (?) in the route definition, like /post/:postId/:commentId?. This means commentId is optional and might not be present in the URL.

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

function PostDetails() {
  const { postId, commentId } = useParams();

  return (
    <div>
      <h1>Post Details</h1>
      <p>Post ID: {postId}</p>
      {commentId ? <p>Comment ID: {commentId}</p> : <p>No comment selected</p>}
    </div>
  );
}

• URL /post/123 will show only the post ID.
• URL /post/123/456 will show both post ID and comment ID.

3. Fetching Data Using the URL Parameter

You can use the dynamic parameters from useParams() to fetch data from an API. For example, fetching details of a user based on the id parameter.

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

function UserDetails() {
  const { id } = useParams();
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Simulate API call
    fetch(`https://api.example.com/users/${id}`)
      .then((response) => response.json())
      .then((data) => setUser(data))
      .catch((error) => console.error('Error fetching user:', error));
  }, [id]);

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>User Details</h1>
      <p>User ID: {id}</p>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserDetails;

• When the user visits /user/123, the useParams() hook extracts the id (123), and then the app fetches the user details for that ID.

4. Handling Missing Parameters

If a parameter is missing, you can handle it by checking whether useParams() returns undefined for that parameter.

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

function Page() {
  const { pageId } = useParams();

  if (!pageId) {
    return <div>No page ID provided!</div>;
  }

  return <div>Showing Page ID: {pageId}</div>;
}

• If the user visits /page/, the component will render "No page ID provided!", as pageId will be undefined.

5. Handling Invalid or Unknown Parameters

In some cases, you might want to validate the URL parameters or handle cases where the parameter is invalid. For example, if you expect a numeric ID but the user enters a string.

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

function UserDetails() {
  const { id } = useParams();

  if (isNaN(id)) {
    return <div>Invalid user ID!</div>;
  }

  return <div>Valid User ID: {id}</div>;
}

• If the user visits /user/abc, the component will render "Invalid user ID!" because id is not a valid number.

Summary:

• useParams() is used to extract URL parameters from dynamic routes in React Router.
• It returns an object containing the parameters as key-value pairs.
• It’s useful in various scenarios like fetching data based on dynamic IDs, handling optional or multiple parameters, and ensuring parameters are valid.

Key Scenarios:

1. Single Parameter: Extracting a single value from the URL (e.g., /user/:id).
2. Multiple Parameters: Handling routes with multiple dynamic parameters (e.g., /category/:categoryId/product/:productId).
3. Optional Parameters: Handling routes where some parameters are optional.
4. Fetching Data: Using URL parameters to fetch specific data from an API.
5. Handling Missing or Invalid Parameters: Safely dealing with cases where parameters are missing or invalid.

This makes useParams() a powerful and flexible hook for building dynamic and data-driven pages in your React apps.

Dynamic params in Routing

Example-1

Dynamic parameters in routing refer to a feature in React Router that allows you to define URL patterns with variable segments. This is useful when you want to create routes that can handle a wide range of inputs without having to define a separate route for each one.

// App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import User from './User';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users/:id" element={<User />} />
      </Routes>
    </Router>
  );
}

export default App;

// Home.js

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

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <ul>
        <li><Link to="/users/1">User 1</Link></li>
        <li><Link to="/users/2">User 2</Link></li>
        <li><Link to="/users/3">User 3</Link></li>
      </ul>
    </div>
  );
}

export default Home;

// User.js

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

function User() {
  const { id } = useParams();

  return (
    <div>
      <h1>User {id}</h1>
      <p>This is the page for User {id}.</p>
    </div>
  );
}

export default User;

In this example, we have three components:

• App: The top-level component that defines the routing for the app using Routes and Route.
• Home: A simple component that displays a list of links to different user pages.
• User: A component that displays information about a specific user, based on the dynamic parameter id in the URL.

When a user clicks on a link to a user page, React Router will match the URL to the Route for User and pass the id parameter as a prop. The User component then uses the useParams hook to extract the id parameter and render information specific to that user.

Example-2 based on Fetching Data Using the URL Parameter

Components Overview:

1. App.js: The main component with routing logic.
2. UserList.js: A component displaying a list of users (each with a link to their details page).
3. UserDetails.js: The component you've already provided that fetches user data based on the id URL parameter.
4. Navbar.js: A simple navigation bar for the app.
5. Basic CSS (optional): For styling.

1. App.js – Main Application with Routing

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import UserList from './UserList';
import UserDetails from './UserDetails';
import Navbar from './Navbar';

function App() {
  return (
    <Router>
      <Navbar />
      <div style={{ padding: '20px' }}>
        <Routes>
          <Route path="/" element={<UserList />} />
          <Route path="/user/:id" element={<UserDetails />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

• Explanation:
  • The App component sets up the routes. When the path is /, it renders the UserList component. When the path is /user/:id, it renders the UserDetails component, where :id is the dynamic parameter.

2. UserList.js – Displays a List of Users

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

const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Smith' },
  { id: 3, name: 'Alice Johnson' },
];

function UserList() {
  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={`/user/${user.id}`}>
              {user.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

• Explanation:
  • This component renders a list of users. Each user's name is wrapped in a Link component that routes to /user/:id, where id is the user's unique ID. Clicking the link will take the user to the UserDetails page for that specific user.

3. UserDetails.js – Fetches and Displays User Details

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

function UserDetails() {
  const { id } = useParams(); // Get the id from the URL
  const [user, setUser] = useState(null); // State to hold the user data

  useEffect(() => {
    // Simulate API call
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`) // Using a placeholder API
      .then((response) => response.json())
      .then((data) => setUser(data)) // Set the fetched data to user state
      .catch((error) => console.error('Error fetching user:', error));
  }, [id]);

  if (!user) {
    return <div>Loading...</div>; // Show a loading message if the data is not yet loaded
  }

  return (
    <div>
      <h1>User Details</h1>
      <p><strong>User ID:</strong> {id}</p>
      <p><strong>Name:</strong> {user.name}</p>
      <p><strong>Email:</strong> {user.email}</p>
      <p><strong>Phone:</strong> {user.phone}</p>
      <p><strong>Website:</strong> {user.website}</p>
    </div>
  );
}

export default UserDetails;

• Explanation:
  • The useParams hook extracts the id from the URL.
  • The component makes an API request to fetch the user details based on this id. (In this case, I'm using the jsonplaceholder.typicode.com API for sample data.)
  • While waiting for the data, the component displays a "Loading..." message.
  • Once the data is fetched, it displays the user details.

4. Navbar.js – A Simple Navigation Bar

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

function Navbar() {
  return (
    <nav style={{ marginBottom: '20px', backgroundColor: '#f8f9fa', padding: '10px' }}>
      <Link to="/" style={{ marginRight: '10px' }}>
        Home
      </Link>
    </nav>
  );
}

export default Navbar;

• Explanation:
  • This is a simple navigation bar with a link to the home page (which displays the list of users). You can expand it further as needed.

Optional: Basic Styling (App.css)

body {
  font-family: Arial, sans-serif;
}

nav {
  background-color: #333;
  color: white;
  padding: 10px;
}

nav a {
  color: white;
  text-decoration: none;
  margin-right: 10px;
}

nav a:hover {
  text-decoration: underline;
}

h1 {
  color: #2c3e50;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  color: #3498db;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

useNavigate

The useNavigate hook is a part of React Router and is used for programmatic navigation in a React application. It provides a function that allows you to navigate to different pages or paths in response to user actions, events, or other conditions in your application.

Usecases of useNavigate:

1. Handling Form Submissions: You can use useNavigate to navigate to a different page after a form submission. For example, redirecting to a success page after a form is successfully submitted.

2. Conditional Navigation: Based on certain conditions or user interactions, you might want to navigate the user to different parts of your application. useNavigate is handy for such scenarios.

3. Programmatic Redirects: You can use useNavigate for programmatic redirects, where you want to take the user to a different route based on certain conditions in your application.

Example:

Let's create a simple example where we have a form, and after submitting the form, we want to navigate to a success page.

Routing.js:

import React from "react";
import FunctionCompo from "./FunctionCompo";
import Home from "./Home";
import ClassCompo from "./ClassCompo";
import { Routes, Route, Link, NavLink } from "react-router-dom";
import User from "./User";
import "./App.css";
import CardOne from "./CardOne";

const Routing = () => {
  return (
    <>
      <nav>
        <NavLink
          to="/"
          style={({ isActive }) => ({
            color: isActive ? "greenyellow" : "white",
          })}
        >
          Home
        </NavLink>
        <NavLink to="/about" activeClassName="active">
          About
        </NavLink>
        <NavLink to="/contact" activeClassName="active">
          Contact
        </NavLink>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<FunctionCompo />} />
        <Route path="/contact" element={<ClassCompo />} />
        <Route path="/users/:id" element={<User />} />
        <Route path="/users/:id/CardOne" element={<CardOne />} />
      </Routes>
    </>
  );
};

export default Routing;

User.js:

import { useParams ,useNavigate} from 'react-router-dom';

function User() {
  const { id } = useParams();
  console.log({id})
  const navigate = useNavigate();

  return (
    <div>
      <h1>User {id}</h1>
      <p>This is the page for User {id}.</p> 
      <button onClick={()=>navigate('./CardOne')}>Click</button>
    </div>
  );
}

export default User;

CardOne.js:

import React from 'react'
import './App.css';

const CardOne = () => {
  return (
    <div>
        Cardone component 
    </div>
  )
}

export default CardOne

In this example:

• The useNavigate hook is used in the Home component.
• When the form is submitted, the handleSubmit function is called, and it uses navigate('/success') to navigate to the success page.
• The Link components in the navigation bar allow for manual navigation between the home and success pages.

When you run this application, you'll be able to see how useNavigate is employed to handle navigation based on a form submission.

useLocation

The useLocation hook is a part of React Router, and it provides access to the current location object. The location object represents where the app is now, including information about the current URL, path, search parameters, and more. By using useLocation, you can access this information within your components.

Details of useLocation:

• Location Object: The useLocation hook returns a location object that contains information about the current URL. The location object has several properties, including pathname, search, hash, state, and key.

• pathname: It represents the path of the URL.

• search: It represents the query string parameters of the URL.

• hash: It represents the URL fragment identifier.

• state: It represents the state object, which can be passed during navigation.

• key: A unique key for the location.

Example:

Let's create an example where we display information about the current location in a React component.

App.js:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';

const App = () => (
  <Router>
    <nav>
      <Link to="/">Home</Link>
    </nav>

    <Route path="/" element={<Home />} />
  </Router>
);

export default App;

Home.js:

import React from 'react';
import { useLocation } from 'react-router-dom';

const Home = () => {
  const location = useLocation();

  return (
    <div>
      <h2>Home</h2>
      <p>Current Path: {location.pathname}</p>
      <p>Query Parameters: {location.search}</p>
      <p>Hash: {location.hash}</p>
      <p>State: {location.state ? JSON.stringify(location.state) : 'None'}</p>
      <p>Location Key: {location.key}</p>
    </div>
  );
};

export default Home;

In this example:

• The useLocation hook is used in the Home component to get the current location.
• The component displays information such as the current path, query parameters, hash, state, and location key.
• The Link component allows you to navigate between pages.

When you navigate through the app, you'll see that the information about the current location is dynamically updated based on the URL changes. This can be useful for displaying dynamic content or handling navigation-related logic based on the current URL.

State Uplifing

• Often there will be a need to share state between different components. The common approach to share state between two components is to move the state to common parent of the two components. This approach is called as lifting state up in React.js

• With the shared state, changes in state reflect in relevant components simultaneously. This is a single source of truth for shared state components.

Props drilling

• It is the process by which you pass data from one component of the React Component tree to another by going through other components that do not need the data but only help in passing it around.

• In a React component hierarchy, props can be passed down from a parent component to its child component, and then to its child's child component, and so on. When a component deep down in the hierarchy needs to access data or functionality that is only available in a higher-level component, the data or functionality must be passed down through all the intermediate components via props. This process is known as "props drilling".

Example 1: (With Props drilling) In this below example we are taking one Parent.js and we need to pass some datas from parent to ChildC. For that we need to pass data from parent to ChildA then ChildA to ChildB and then ChildB to ChildC.

// App.js

import Parent from "./woUsecontext/Parent";
  
const App=()=> {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}
export default App

// Parent.js

import React, { useState } from "react";
import ChildA from "./ChildA";

const Parent = () => {
    const [fName, setfName] = useState("SP");
    const [lName, setlName] = useState("Acharya");
  return (
    <>
      <div>This is a Parent component</div>
      <br />
      <ChildA fName={fName} lName={lName} />
    </>
  )
}

export default Parent

//ChildA.js

import React from 'react'
import ChildB from './ChildB';

function ChildA({ fName, lName }) {
    return (
      <>
        This is ChildA Component.
        <br />
        <ChildB fName={fName} lName={lName} />
      </>
    );
  }

export default ChildA

// ChildB.js

import React from 'react'
import ChildC from './ChildC';

function ChildB({ fName, lName }) {
    return (
      <>
        This is ChildB Component.
        <br />
        <ChildC fName={fName} lName={lName} />
      </>
    );
  }

export default ChildB

//ChildC.js

import React from 'react'

function ChildC({ fName, lName }) {
    return (
      <>
        This is ChildC component.
        <br />
        <h3> Data from Parent component is as follows:</h3>
        <h4>{fName}</h4>
        <h4>{lName}</h4>
      </>
    );
  }

export default ChildC

Output:

Demonstrating the Data initialized in Parent, Needed in last component(Child C) have to passed down each level known as Prop Drilling.

Props drilling can have several drawbacks, including:

1. Prop pollution:

As props are passed down through multiple layers of components, it can result in the accumulation of unnecessary or irrelevant props in components that don't actually need them. This can make the code more complex and harder to maintain.

2. Tight coupling:

Passing down props through multiple layers of components can lead to tight coupling between components. If a parent component needs to be modified, it may require changes to be made in all the child components that rely on its props. This can make it harder to refactor or modify the code in the future.

3. Performance:

Passing down props through multiple layers of components can affect the performance of the application. If the application has a large component tree with many nested components, it can slow down the rendering process and affect the user experience.

To overcome these drawbacks, alternative state management solutions such as context, Redux, or GraphQL can be used to manage the state and data more efficiently and avoid excessive props drilling.

Example 2: With Usecontext hook and Context API

Context API

The problem with Prop Drilling is that whenever data from the Parent component will be needed, it would have to come from each level, Regardless of the fact that it is not needed there and simply needed in last.

A better alternative to this is using useContext hook. The useContext hook is based on Context API and works on the mechanism of Provider and Consumer. Provider needs to wrap components inside Provider Components in which data have to be consumed. Then in those components, using the useContext hook that data needs to be consumed.

// App.js

import Parent from "./woUsecontext/Parent";
  
const App=()=> {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}
export default App

//Parent.js

import React, { useState, useContext } from "react";

let context = React.createContext(null);
function Parent() {
const [fName, setfName] = useState("SP");
const [lName, setlName] = useState("Acharya");
return (
	<context.Provider value={{ fName, lName }}>
	<div>This is a Parent component</div>
	<br />
	<ChildA />
	</context.Provider>
);
}

function ChildA() {
return (
	<>
	This is ChildA Component.
	<br />
	<ChildB />
	</>
);
}

function ChildB() {
return (
	<>
	This is ChildB Component.
	<br />
	<ChildC />
	</>
);
}

function ChildC() {
const { fName, lName } = useContext(context);
return (
	<>
	This is ChildC component.
	<br />
	<h3> Data from Parent component is as follows:</h3>
	<h4>{fName}</h4>
	<h4>{lName}</h4>
	</>
);
}

export default Parent;

Same output but this time instead of passing data through each level, It is directly consumed in the component required using useContext Hook.

Dynamic Context Example

-> Here we are taking one simple example where in dynamic context we are using some movie names , images and rating.

//MovieContext.js

import React from 'react';

const MovieContext = React.createContext();

export default MovieContext;

//MovieProvider.js

import React, { useState } from 'react';
import MovieContext from './MovieContext';

const MovieProvider = (props) => {
  const [movies, setMovies] = useState([
    { name: "The Shawshank Redemption", image: "shawshank.jpg", rating: 9.3 },
    { name: "The Godfather", image: "godfather.jpg", rating: 9.2 },
    { name: "The Dark Knight", image: "darkknight.jpg", rating: 9.0 }
  ]);

  return (
    <MovieContext.Provider value={{ movies }}>
      {props.children}
    </MovieContext.Provider>
  );
}

export default MovieProvider;

//MovieList.js

import React, { useContext } from 'react';
import MovieContext from './MovieContext';

const MovieList = () => {
  const { movies } = useContext(MovieContext);

  return (
    <div>
      {movies.map(movie => (
        <div key={movie.name}>
          <img src={movie.image} alt={movie.name} />
          <h2>{movie.name}</h2>
          <p>Rating: {movie.rating}</p>
        </div>
      ))}
    </div>
  );
}

export default MovieList;

//App.js

import React from 'react';
import MovieProvider from './MovieProvider';
import MovieList from './MovieList';

const App = () => {
  return (
    <MovieProvider>
      <MovieList />
    </MovieProvider>
  );
}

export default App;

Output:

In this example, we create a separate file for each component.

The MovieContext component is responsible for creating the context object using the React.createContext() method.

The MovieProvider component defines the state variable movies and passes it down to its children components through the context object using the MovieContext.Provider component.

The MovieList component retrieves the movies data from the context object using the useContext() hook and maps over the array to render a list of movie items.

Finally, the App component renders the MovieProvider component as a parent of the MovieList component, so that the MovieList component can access the movies data from the context object.

Pass data from child to parent in context api

//parent.js

import React, { createContext, useState } from "react";
import ChildOne from "./ChildOne";

export const context = createContext();

const Parent = () => {
  const [name, setName] = useState("SP");

  const [month,setMonth] = useState("January")

  const monthData=(item)=>{
    console.log(item)
    setMonth(item)
  }

  return (
    <div>
      <context.Provider value={{name,monthData}}>
        <h1>{month}</h1>
        <p>This is parent component</p>
        <h1>{name}</h1>
        <ChildOne />
      </context.Provider>
    </div>
  );
};

export default Parent;

//childOne.js

import React,{useContext} from 'react'
import {context} from './Parent';

const ChildOne = () => {

    const{name,monthData} = useContext(context)
    const month = "December";

  return (
    <div>
        <p>This is ChildOne component</p>
        <h1>{name}</h1>
        <button onClick={()=>monthData(month)}>Click</button>
    </div>
  )
}

export default ChildOne

Axio Vs Fetch

Axios :

• Axios is a popular JavaScript library for making HTTP requests. It supports various HTTP methods, including GET, POST, PUT, and DELETE, allowing you to interact with APIs and fetch or send data. Below, I'll provide examples for each HTTP method using Axios and explain when to use each method.

• Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser and it supports the Promise API that is native to JS ES6.

• It can be used intercept HTTP requests and responses and enables client-side protection against XSRF. It also has the ability to cancel requests. EX: axios.get('url') .then((response) =>

Fetch:

• The Fetch API provides a fetch() method defined on the window object. It also provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline (requests and responses).
• The fetch method has one mandatory argument- the URL of the resource to be fetched. This method returns a Promise that can be used to retrieve the response of the request. EX:: fetch('path-to-the-resource-to-be-fetched') .then((response) => {

Q. What is HTTP ?

HTTP (Hypertext Transfer Protocol) is a protocol that is used to transfer hypertext from client end to server end .

What are HTTP request Methods ?

• Get: This method retrieves information from a given server using a given URL
• Post: Post method sends the data to server Example: need to update the phone number of user we will use post method
• Put: It is used to replace all current representations of target resources with uploaded content
• Delete: It is used to remove all the current representations of the target resource which is given by URL

axios and fetch are both used for making HTTP requests to servers, but they have some differences. Here are some of the main differences:

1. Syntax: axios uses a simple syntax and provides a higher level of abstraction over the XMLHttpRequest object. On the other hand, fetch uses a lower-level syntax and requires more configuration to use effectively.

2. Error Handling: axios handles errors better than fetch. In axios, any response code that falls outside the range of 2xx will trigger an error, which can be easily handled using a catch block. In fetch, a response with a 404 or 500 status code will still resolve successfully, requiring additional checking of the response status.

3. Cross-Origin Requests: axios automatically includes credentials and headers for cross-origin requests, whereas with fetch you need to manually set the mode and credentials to include.

Here's an example of how to use axios to make a GET request:

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

And here's an example of how to use fetch to make a GET request:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

As you can see, the axios code is simpler and easier to read, and the error handling is more straightforward. The fetch code requires additional error checking and handling, making it slightly more complex.

1. GET Method:

The GET method is used to retrieve data from a specified resource. It should only retrieve data and should not have any other effect.

Example: Fetching a List of Users

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

const AxiosComp = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Use axios.get instead of client.get
    axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => {
        setPosts(response.data);
      })
      .catch((error) => {
        console.error('Axios Error:', error);
      });
  }, []);

  return (
    <>
      <h1>Axios Comp</h1>
      {/* Render your posts data here */}
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </>
  );
};

export default AxiosComp;

Use Cases:

• Retrieving a list of products from an e-commerce website.
• Fetching user information for a profile page.
• Getting the latest news articles from a news API.

2. POST Method:

The POST method is used to submit data to be processed to a specified resource. It is often used when uploading a file or submitting a form.

Example: Creating a New User

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

const AxiosPostExample = () => {
  const [newPost, setNewPost] = useState({
    title: "",
    body: ""
  });

  const handleCreatePost = () => {
    // Make a POST request to create a new post
    axios.post('https://jsonplaceholder.typicode.com/posts', newPost)
      .then((response) => {
        console.log('Axios POST Response:', response.data);
      })
      .catch((error) => {
        console.error('Axios POST Error:', error);
      });
  };

  return (
    <>
      <h1>Axios POST Example</h1>
      <div>
        <label>Title:</label>
        <input
          type="text"
          value={newPost.title}
          onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
        />
      </div>
      <div>
        <label>Body:</label>
        <textarea
          value={newPost.body}
          onChange={(e) => setNewPost({ ...newPost, body: e.target.value })}
        />
      </div>
      <button onClick={handleCreatePost}>Create Post</button>
    </>
  );
};

export default AxiosPostExample;

Use Cases:

• Creating a new user account.
• Submitting a form with user input data.
• Uploading an image or file.

3. PUT Method:

The PUT method is used to update a resource or create a new resource if it doesn't exist. It replaces the entire resource with the new data.

Example: Updating User Information

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

const AxiosPutExample = () => {
  const [post, setPost] = useState(null);

  useEffect(() => {
    // Fetch an initial post for demonstration purposes
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => {
        setPost(response.data);
      })
      .catch((error) => {
        console.error('Axios GET Error:', error);
      });
  }, []);

  const handleUpdatePost = () => {
    if (!post) {
      console.error('No post data to update.');
      return;
    }

    // Update the title of the post using axios.put
    axios.put(`https://jsonplaceholder.typicode.com/posts/${post.id}`, {
      title: 'Updated Post Title',
    })
      .then((response) => {
        setPost(response.data);
        console.log('Axios PUT Response:', response.data);
      })
      .catch((error) => {
        console.error('Axios PUT Error:', error);
      });
  };

  return (
    <>
      <h1>Axios PUT Example</h1>
      {post && (
        <div>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      )}
      <button onClick={handleUpdatePost}>Update Post Title</button>
    </>
  );
};

export default AxiosPutExample;

Use Cases:

• Updating user profile information.
• Modifying the details of a specific product.
• Editing the content of a blog post.

4. DELETE Method:

The DELETE method is used to request that a resource be removed or deleted.

Example: Deleting a Post

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

const AxiosDeleteExample = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Fetch initial posts for demonstration purposes
    axios.get('https://jsonplaceholder.typicode.com/posts?_limit=5')
      .then((response) => {
        setPosts(response.data);
      })
      .catch((error) => {
        console.error('Axios GET Error:', error);
      });
  }, []);

  const handleDeletePost = (postId) => {
    // Make a DELETE request to delete a post
    axios.delete(`https://jsonplaceholder.typicode.com/posts/${postId}`)
      .then(() => {
        // Update the state to remove the deleted post
        setPosts(posts.filter(post => post.id !== postId));
        console.log(`Post with ID ${postId} deleted`);
      })
      .catch((error) => {
        console.error('Axios DELETE Error:', error);
      });
  };

  return (
    <>
      <h1>Axios DELETE Example</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <button onClick={() => handleDeletePost(post.id)}>Delete Post</button>
        </div>
      ))}
    </>
  );
};

export default AxiosDeleteExample;

Use Cases:

• Deleting a user account.
• Removing a product from a shopping cart.
• Deleting a comment from a discussion thread.

Summary:

• GET: Retrieving data. Safe and idempotent (multiple identical requests have the same effect as a single request).
• POST: Creating a new resource or submitting data. Not idempotent.
• PUT: Updating or creating a resource. Idempotent.
• DELETE: Deleting a resource. Idempotent.

Choose the appropriate method based on the operation you want to perform, considering the characteristics of each method and the RESTful principles.

Memory Leak

In React, a memory leak can occur when a component allocates memory and fails to release it after it's no longer needed. This can lead to an accumulation of unused memory, which can cause performance issues and even crash the application.

Here are a few scenarios in which memory leaks can occur in React:

1. Improper use of state and props: When a component's state or props are updated frequently, it can lead to a buildup of memory. For example, if a component has a setInterval() method that updates the state every second, the state object will keep growing, eventually leading to a memory leak.

2. Event listeners: When a component registers event listeners, such as mouse clicks or key presses, it can create a memory leak if it doesn't remove the listeners when the component is unmounted. This can cause the event listeners to accumulate, leading to memory issues.

3. Improper use of useEffect(): The useEffect() hook is used to perform side effects in functional components. If the hook is not used correctly, it can lead to memory leaks. For example, if a component sets up a timer in useEffect() and doesn't clear it when the component unmounts, the timer will continue running, causing a memory leak.

To prevent memory leaks in React, it's important to follow best practices, such as:

• Use the useMemo() hook to memoize expensive calculations and prevent unnecessary re-renders.

• Use the useCallback() hook to memoize event handlers and prevent unnecessary re-renders.

• Use the useRef() hook to create references that persist across renders.

• Use the useEffect() hook to clean up any resources, such as event listeners or timers, when the component unmounts.

By following these best practices, you can prevent memory leaks in your React applications and ensure optimal performance.

State Management

The Four Kinds of React State to Manage :

When we talk about state in our applications, it’s important to be clear about what types of state actually matter.

There are four main types of state you need to properly manage in your React apps:

1. Local state
2. Global state
3. Server state
4. URL state

Local (UI) state –

• Local state is data we manage in one or another component.
• Local state is most often managed in React using the useState hook.
• For example, local state would be needed to show or hide a modal component or to track values for a form component, such as form submission, when the form is disabled and the values of a form’s inputs.

Global (UI) state –

• Global state is data we manage across multiple components.
• Global state is necessary when we want to get and update data anywhere in our app, or in multiple components at least.
• A common example of global state is authenticated user state. If a user is logged into our app, it is necessary to get and change their data throughout our application.
• Sometimes state we think should be local might become global.

Server state –

• Data that comes from an external server that must be integrated with our UI state.
• Server state is a simple concept, but can be hard to manage alongside all of our local and global UI state.
• There are several pieces of state that must be managed every time you fetch or update data from an external server, including loading and error state.
• Fortunately there are tools such as SWR and React Query that make managing server state much easier.

URL state –

• Data that exists on our URLs, including the pathname and query parameters.

• URL state is often missing as a category of state, but it is an important one.

• In many cases, a lot of major parts of our application rely upon accessing URL state. Try to imagine building a blog without being able to fetch a post based off of its slug or id that is located in the URL!

1. Redux

a. Redux Introduction:

Redux is a state management library commonly used with React applications. It helps manage the state of your application in a predictable way, making it easier to debug and maintain.

In Redux, the state of your entire application is stored in a single store. The only way to change the state is by dispatching actions. Actions describe the changes that you want to make, and reducers handle those changes based on the current state and the action dispatched.

Why Use Redux and Its Advantages:

• Predictable State: Redux provides a predictable state container. The state changes in a controlled and predictable manner, making it easier to reason about your application's behavior.

• Centralized State: All your application's state is stored in a single store, making it easier to manage and debug.

• Debugging: With tools like Redux DevTools, you can track every state change and action, making debugging more straightforward.

• Middleware: Redux allows you to use middleware to extend its functionality, like handling asynchronous operations.

• Simplified Code:- Redux Toolkit provides a simplified API for creating and managing Redux stores. It also includes a number of utilities for common Redux tasks, such as creating reducers, handling asynchronous actions, and creating immutable state.

• Improved Developer Experience:- Redux Toolkit comes with helpful development tools, including an integration with the Redux DevTools Extension, which makes it easier to debug and inspect the state of your application.

• Performance Optimization:- Redux Toolkit includes a utility called "createSlice" that automatically generates optimized Redux reducer functions based on the initial state and action types you provide. This can help improve performance by reducing the amount of unnecessary work done by your reducers.

c. Difference Between Context API and Redux:

Context API:

• Context API is a part of React itself, used for managing the state across the component tree.
• Suitable for simpler state management within components or small to medium-sized applications.
• Does not provide middleware support for complex state operations.

Redux:

• A separate library focused solely on state management.
• Ideal for larger applications where state needs to be shared across many components.
• Offers middleware support for handling asynchronous actions and complex state logic.

d. Redux Toolkit Introduction and Principles:

Redux Toolkit:

• A set of tools and guidelines to simplify Redux development.
• Encourages best practices and a standardized way of writing Redux code.
• Includes utilities like createSlice for defining reducers and configureStore for creating the store.

f. Difference Between Redux and Redux Toolkit:

Redux:

• Requires writing more boilerplate code for actions and reducers.
• Actions and reducers are defined separately.
• No built-in utilities for creating slices or handling immutable updates.

Redux Toolkit:

• Simplifies Redux code by providing utilities like createSlice.
• Promotes a standardized file structure.
• Encourages the use of immutability for state updates.

REDUX Toolkit

Redux Toolkit is a set of libraries and tools that make it easier to manage state in React applications using Redux.

It provides a simpler API for creating and managing Redux stores, includes helpful development tools, improves performance optimization, improves type safety, and provides a clear and consistent architecture for managing application state.

Overall, Redux Toolkit helps streamline the development process and improve the performance, maintainability, and scalability of your React applications that use Redux.

Store: The Redux store is the main, central bucket which stores all the states of an application. It should be considered and maintained as a single source of truth for the state of the application.

Action: (what to do) The only way to change the state is to emit an action, which is an object describing what happened

reducers:(How to do) Reducers, as the name suggests, take in two things: previous state and an action. Then they reduce it (read it return) to one entity: the new updated instance of state.

So reducers are basically pure JS functions which take in the previous state and an action and return the newly updated state.

I like to think of a reducer like a “coffee maker”. The coffee maker takes in coffee powder and water. It then returns a freshly brewed cup of coffee that we can enjoy. Based on this analogy reducers are functions that take in the current state (coffee powder) and actions (water) and brew a new state (fresh coffee).

Redux is a global state

You may need Redux if you don't want to do props drilling (passing props too deep).

Data flow in Redux

Redux follows a unidirectional data flow. Redux has 3 major components: ‘actions’, ‘reducers’ and the ‘store’.

Here is a simple example of how to implement and what are ther step of redux.

-> Firstly Install the required packages:-

Install the redux and react-redux packages along with redux-toolkit package in your React application using npm.

npm install redux react-redux @reduxjs/toolkit

-> react Redux reducers:-

Create your reducers using the createSlice function provided by Redux Toolkit. This function generates a reducer function for you, based on the initial state and the actions you define.

// countSlice.js

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

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

export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

const countSlice = createSlice({...}): This line uses the createSlice function to define a new slice of the store called "count". The createSlice function takes an object with several properties:

~name: A string name for the slice.

~initialState: The initial state of the slice.

~reducers: An object with functions that define how the slice should respond to actions that are dispatched to the store. reducers: {...}: This section defines the two reducers for the "count" slice:

~ add: This reducer takes the current state and a payload argument (which is the value passed to the action) and returns a new state with the payload value added to it.

Payload:- While action types allow you tell your reducer what action it should take, the payload is the data that your reducer will use to update the state. This lesson shows you how to pass an action payload along with your action type to update the state.

~ reset: This reducer takes the current state and sets it back to the initial state.

~ export const { add, reset } = countSlice.actions;

This line exports the add and reset action creators from the "count" slice. These action creators are functions that return action objects with a type property and a payload property (if applicable).

~ export default countSlice.reducer:- This line exports the "count" slice's reducer function, which takes the current state and an action object and returns the new state.

-> Create a Redux store:-

In your store.js file, create a Redux store using the configureStore function provided by Redux Toolkit. This function takes an object with a reducer property and an optional middleware property.

configureStore is only accepting one parameter, which is an Object, which is called ConfigureStoreOptions.

// store.js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

import countReducer from './countSlice';: This line imports the "count" slice's reducer function from the countSlice.js file.

const store = configureStore({...}):-

This line uses the configureStore function to create a new Redux store. The configureStore function takes an object with several properties:

reducer: An object with key-value pairs where the keys are the names of the slices in the store and the values are the reducer functions for those slices.

reducer: {...}: This section defines the reducers for the store. In this case, there is only one slice called "count", so the countReducer function is associated with it.

-> This code sets up the Redux store for use in the React app:

In index.js file, import Provider from react-redux. The Provider component from the react-redux library is used to provide the Redux store to the app. The store object is imported from the ./store file.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

-> Connect Redux to React components:

Use the useSelector and useDispatch hooks provided by the react-redux package to connect your React components to the Redux store.

// App.js

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

const App = () => {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(increment());
  };

  const handleDecrement = () => {
    dispatch(decrement());
  };

  const handleReset = () => {
    dispatch(reset());
  };

  return (
    <div>
      <h2>Counter: {counter}</h2>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
};

export default App;

Output:

This code defines the App component, which displays the current count and two buttons to add to the count and reset it. The useSelector hook is used to extract the count state from the Redux store. The useDispatch hook is used to dispatch the add and reset actions to modify the count state.

useSelector:

• useSelector and useDispatch are two hooks provided by the react-redux library that are commonly used in conjunction with Redux Toolkit to manage state in a React application.
• useSelector is used to select data from the Redux store. It takes a function as an argument that defines how to extract the data from the store, and returns the selected data.

useDispatch:

• useDispatch is used to dispatch actions to the Redux store. It returns a reference to the dispatch function.
• if we want to modify the global state we need to useDispatch and the action that we already created in slice.

Summary:

we have 6 steps to implement the Redux Toolkit to our react project:

• Install Redux Toolkit and React-Redux Packages
• Create a Redux Store
• Include the Redux Store to App.js parent
• Create a Redux State Slice
• Add Slice Reducers to the Store
• Implementing useSelector and useDispatch in React Components

Redux Thunk:

• The most common use case for Redux Thunk is for communicating asynchronously with an external API to retrieve or save data. Redux Thunk makes it easy to dispatch actions that follow the lifecycle of a request to an external API.

• Redux Thunk is middleware that allows you to return functions, rather than just actions, within Redux. This allows for delayed actions, including working with promises.

• One of the main use cases for this middleware is for handling actions that might not be synchronous, for example, using axios to send a GET request.

• Redux Thunk allows us to dispatch those actions asynchronously and resolve each promise that gets returned.

Example:

Suppose you have an application that needs to fetch data from an API and display it in the UI. You can use Redux-thunk to handle asynchronous actions in Redux.

First, you would define your Redux store with the redux-thunk middleware:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);
export default store

Next, you would create an action creator that makes an API request and dispatches actions to update the Redux store:

import axios from 'axios';

export const fetchPosts = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' });
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        const posts = response.data;
        dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: posts });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_POSTS_FAILURE', error });
      });
  };
};

In this example, fetchPosts is a thunk action creator that returns a function instead of an object. The function takes dispatch as an argument, which allows it to dispatch multiple actions.

When fetchPosts is called, it dispatches a FETCH_POSTS_REQUEST action to indicate that the API request is starting. It then makes an API request using the axios library. When the request is successful, it dispatches a FETCH_POSTS_SUCCESS action with the response data as the payload. If the request fails, it dispatches a FETCH_POSTS_FAILURE action with the error object.

Finally, you would use this action creator in your component to fetch the data and update the Redux store:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchPosts } from './actions';

const Posts = () => {
  const dispatch = useDispatch();
  const posts = useSelector(state => state.posts);
  const isLoading = useSelector(state => state.isLoading);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default Posts;

In this example, the Posts component uses the useDispatch and useSelector hooks from the react-redux library to interact with the Redux store. It dispatches the fetchPosts action when the component mounts using the useEffect hook. It also uses the isLoading state to show a loading indicator while the API request is in progress. Once the request is complete, it displays the fetched data in the UI.

That's a simple example of how Redux-thunk can be used to handle asynchronous actions in Redux.

Thunk Vs Saga

Saga middleware is a library for handling side effects in React applications using Redux. Side effects are any operations that are not pure functions, such as making API calls, accessing browser storage, or handling asynchronous code. These effects can be difficult to manage in Redux, and Saga provides a way to handle them in a declarative and testable way.

In summary, Thunk is a simple and lightweight library that is good for handling basic asynchronous operations, while Saga is a more powerful and flexible library that can handle more complex async scenarios.

Steps to Build a Counter App with Redux Toolkit

1. Install Required Packages

   • Install @reduxjs/toolkit and react-redux using:

     npm install @reduxjs/toolkit react-redux
     

2. Create the Slice

   • In counterSlice.js, define a slice with:
     • Initial state:
     • Define createSlice and inside that define name, initialstate,reducer
     • Reducers: increment, decrement, and reset.
   • Export the actions (increment, decrement, reset) and the reducer.

3. Set Up the Store

   • In store.js, use configureStore from Redux Toolkit:
     • For multiple slices: reducer: { slicename: counterReducer }.

4. Build the Counter Component

   • In CounterComponent.js, create a functional React component:
     • Use useSelector to read the state. useSelector(state=>state.slicename)
     • Use useDispatch to dispatch actions (increment, decrement, reset).
   • Display the current count and buttons for each action.

5. Connect Redux to React

   • Wrap the App component with <Provider> in index.js:
   • Pass the store as a prop to the Provider.

• File Structure: Keep files modular:
  • store.js: Store setup.
  • counterSlice.js: Slice and actions.
  • CounterComponent.js: React component.

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

// This is a Server Component
async function ProductList() {
  const products = await db.products.all(); // Direct DB access!
  return (
    <ul>
      {products.map(p => <li>{p.name}</li>)}
    </ul>
  );
}