Forem: Pritpal Singh

Context in React: Better Approach

Pritpal Singh — Mon, 16 Sep 2024 08:42:33 +0000

First, look at this code:

userContext.js

import { createContext, useContext } from "react";

const UserContext = createContext({
  user: { name: 'Default User', age: 0 },
  setUser: () => {} //we can also pass state here.
});

export const ThemeProvider = ThemeContext.Provider;

export default function useCont() {
  return useContext(UserContext);
}

Provide Default Values in `createContext`

We can provide default values directly when you create a context using React.createContext(). These default values are used only when a component is consuming the context without being wrapped by a Provider. However, it's important to note that if you use a Provider, the values from the Provider will override any default values set in createContext.

const UserContext = createContext({
  user: { name: 'Default User', age: 0 },
  setUser: () => {} //we can also pass state here.
});

Exporting ContextProvider

Instead of creating a custom Provider component, you're directly exporting Context.Provider as ContextProvider:

export const ThemeProvider = ThemeContext.Provider;

This allows you to use the ThemeProvider anywhere in your app.

Creating a Custom Hook for Easier Consumption

By creating the useCont hook, you're simplifying the consumption of the context. Instead of writing useContext(UserContext) every time, you just use useCont():

export default function useCont() {
  return useContext(UserContext);
}

Now in any component, you can easily access the context.

Benefits of This Structure:

Default Values: You set fallback values in case the Provider is not used.
Reusability: The ThemeProvider and useTheme hook make it easy to use context across your app.
Clean and Simple: It keeps the code modular and separates concerns, making the provider and context consumption easy.

Implementation

App.jsx

import React from 'react';
import { UserProvider, useUser } from './UserContext';

const App = () => {
const { user, setUser } = useUser(); //direct usage of the hook created without need for usercontext and useContect hook.

  return (
    <UserProvider>//Here we are directly wrapping the children. It can be done even in main.jsx/index.js
      <div>
      <h1>Name: {user.name}</h1>
      <p>Age: {user.age}</p>
      <button onClick={() => setUser({ name: 'Jane Doe', age: 25 })}>
        Update User
      </button>
    </div>
    </UserProvider>
  );
};

export default App;

Context in React

Pritpal Singh — Sun, 15 Sep 2024 06:23:40 +0000

The Problem with Passing Props

In React, passing data through props can become cumbersome as your app grows. For example, if you need to pass data to deeply nested components, you have to pass the data through every intermediary component. This can lead to “prop drilling,” where you’re passing the same data through multiple layers of components.

This is where the Context API comes in. With Context API, you can store data at the top level of the component tree and make it available to all other components that need it without passing props.

The React Context API is a way to manage and share state across your application without having to pass props down through every level of your component tree. It helps manage global data that needs to be accessible by many components at different nesting levels.

Get Started with the Context API

It's a good practice to organize your React application by creating a separate folder for context files.

Create a Context Object

Create a context object using the createContext function from the 'react' library. This context object will hold the data that you want to share across your application.

userContext.js

import React from "react";

const UserContext = React.createContext();

export default UserContext;

Wrap Components with a Provider

Once you create a context object, you use its Provider component to wrap the components that need access to the shared data. For example, if you create a UserContext, you would wrap your components inside the <UserContext.Provider>. This allows any component within that wrapper to access the shared data provided by the context.

It's important to note that the Provider component should be wrapped around the top-level component in an application to ensure that all child components have access to the shared data.

userContextProvider.jsx

import React from 'react'
import  UserContext from "./userContext";

const userContextProvider = ({children}) => {
    const [user, setUser] = React.useState(null);
  return (
    <UserContext.Provider value={{user, setUser}}>
        {children}
    </UserContext.Provider>
  )
}

export default userContextProvider

app.jsx

import React from 'react'
import UserContextProvider from './context/userContextProvider'
import Login from './components/Login'
import Profile from './components/Profile'

function App() {

  return (
    <>
      <UserContextProvider>
      <Login/>
      <Profile/>
      </UserContextProvider>
    </>
  )
}

export default App

useContext()

useContext() in React to access the data from a context that was provided by a Context.Provider. This hook allows any component inside the provider to easily "consume" or use the shared data without needing to pass it down through props.

Writing Data

When we share data through context, we pass both reading and updating functions, like in the earlier example where we passed an array with user (for reading) and setUser (for writing or updating the data).

In real applications, we often use context to share multiple pieces of data, not just two. Depending on the functionality, you'll have different contexts for different purposes, like:

A UserContext for managing user data (login, profile, etc.).
A ThemeContext for handling themes (dark mode, light mode).
An AuthContext for authentication states (logged in, logged out).

Each context can have its own file for organization, making it easier to manage and maintain the shared data for different parts of the app.

Login.jsx

import React from 'react'
import UserContext from '../context/userContext';


function Login() {
    const [username, setUsername] = React.useState("");
    const [password, setPassword] = React.useState("");

    const {setUser} = React.useContext(UserContext);

    const handleSubmit = (e) => {
      e.preventDefault() //this prevent the data sending through post method to random location on clicking button
      setUser({username, password}); //setUser for writing data.
    };
  return (
    <div>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        type="text"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button onClick={handleSubmit}>Login</button>
    </div>
  );
}

export default Login

Reading Data

Profile.jsx

import React from 'react'
import UserContext from '../context/userContext';

function Profile() {

  const { user } = React.useContext(UserContext);

  if (!user) return <div>Please Login.</div>

  return (
    <div>
        Welcome User: {user.username}
    </div>
  );
}

export default Profile

Routing in React with React Router Dom

Pritpal Singh — Sat, 14 Sep 2024 11:34:35 +0000

React Router DOM helps you create a Single-Page Application (SPA) where the user can navigate between different components without reloading the page.

Installation

Install React Router DOM using npm:



npm install react-router-dom

BrowserRouter

Wrap your entire app inside BrowserRouter so that the React Router DOM knows how to handle different routes in your app.



import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import "./index.css";
import {
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  Route,
} from "react-router-dom";

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <RouterProvider router={router}/> //router here will be defined in the next step.
  </StrictMode>
)

Here, we are in the main.jsx which is index file for the react application created by using Vite.

Route

Each Route points to a specific component. Route can be nested.

path: the URL that users will visit.
element: the component that should be displayed when that URL is visited.

There are two ways to define routes here:




//use plain objects
const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '',
        element: <Home />
      },
      {
        path: 'about',
        element: <About/>
      },
      {
        path: 'contact',
        element: <Contact/>
      },
    ]
  },
])

In this section, we define various routes and the corresponding components that will be displayed for each specific path. For instance, the component <About/> will be rendered when navigating to example.com/about.

Outlet and Nested Routes

When you want to display nested components (like a parent-child structure), you can use Outlet. This allows for nested routes.

In certain web applications, it is necessary to consistently display the same header and footer; to achieve this, we utilize the <Outlet/> tag within App.jsx, establishing it as the primary layout. Alternatively, some developers opt for <layout/> components to fulfill a similar function.

Parent Component:



import { useState } from 'react'
import './App.css'
import { Footer, Header} from './components';
import {Outlet} from "react-router-dom";


export default function App() {

  return (
    <>
      <Header/>
      <Outlet/>
      <Footer/>
    </>
  );
}

Second way to define routes:
This is written in the file - main.jsx and it is also Defining Child Routes



//Configure nested routes with JSX
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path='/' element={<App />}>
      <Route path='' element={<Home />} />
      <Route path='about' element={<About/>}>
      <Route path='later' element={<Later/>} />
      </Route>
      <Route path='contact' element={<Contact/>} />
      <Route path='user/:id' element={<User/>} />
      <Route path='github' element={<Github/>} />
    </Route>
  )
)

This represents the second and preferred method for defining routes. In this instance, we are nesting routes within the /About path.

When users visit /about/later, the About component will be displayed with Later inside it.

Link Tag

The Link component helps you navigate between pages without refreshing. It’s like an anchor (<a>) tag but works in an SPA.



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

export default function Footer() {
  return (
    <section>
            <ul>
              <li>
                <Link
                  to={"/about"}
                >
                  About
                </Link>
              </li>
              <li>
                <Link
                  to={"./contact"}
                >
                  Contact Us
                </Link>
              </li>
            </ul>

    </section>
  );
}

NavLink Tag and Active Links

The NavLink component is used to create navigation links that can automatically apply specific styles or classes to the link that matches the current URL (active link).
It uses a className prop, which can be a function to dynamically apply classes.



import React from 'react'
import { NavLink } from "react-router-dom";

export default function Header() {
  return (

        <nav>
          <ul>
            <li>
              <NavLink
                to="/"
                className={({ isActive }) =>
                  `text-sm font-semibold ${
                    isActive ? "text-orange-500" : "text-gray-800"
                  } hover:text-gray-900`
                }
              >
                Home
              </NavLink>
            </li>
            <li>
              <NavLink
                to="/about"
                className={({ isActive }) =>
                  `text-sm font-semibold ${
                    isActive ? "text-orange-500" : "text-gray-800"
                  } hover:text-gray-900`
                }
              >
                About
              </NavLink>
            </li>
            <li>
              <NavLink
                to="/contact"
                className={({ isActive }) =>
                  `text-sm font-semibold ${
                    isActive ? "text-orange-500" : "text-gray-800"
                  } hover:text-gray-900`
                }
              >
                Contact
              </NavLink>
            </li>
          </ul>
        </nav>
  );
}

useParams and Dynamic Segments

In React Router DOM, the useParams hook allows you to access URL parameters from the current route. It is commonly used when you have dynamic routes and need to extract the values from the URL to display specific information or perform certain actions.

First, we need to declare dynamic routes in the main router.



<Route path='user/:id/post/:postid' element={<User/>} />

Then we use useParams hook in the route component.



import React from 'react'
import { useParams } from "react-router-dom";
export default function User() {
    const {id, postid} = useParams();
  return (
    <div>User: {id}, Post: {postid}
    </div>
  )
}

Data Loading

Fetch data from the GitHub API: It retrieves the profile information for the user when the component mounts. The fetched data is stored in the data state variable. The component then displays the number of followers (data.followers) and the user's avatar image (data.avatar_url). If the data fetch fails, the error is logged, and the failed data is stored in the state.



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

export default function Github() {
    const [data, setData] = useState([]);

    useEffect(() => {
      fetch("https://api.github.com/users/your_user_name")
        .then((response) => response.json())
        .then((json) => setData(json))
        .catch((data) => {console.log(data)
    setData(data)});
    }, []); 
  return (
    <div>
      <h1>Github Followers: {data.followers} </h1>
      <img src={data.avatar_url} alt="avatar" width="200" />
    </div>
  );
}

Now in React Router DOM v6.4+, you can use loaders to fetch data before rendering a component. Loaders are a part of the new data-fetching capabilities in React Router, allowing you to load data asynchronously before a route renders, rather than fetching it within useEffect inside the component. This improves data loading efficiency and prevents rendering before the data is ready.

In the route configuration, you define a loader function that will fetch the data. This data is then passed to the component through the useLoaderData hook.



<Route loader={githubInfoLoader} path="github" element={<Github />} />

Instead of using useEffect and useState, you use useLoaderData to access the data fetched by the loader.



import React from 'react'
import { useLoaderData } from "react-router-dom";

export default function GithubLoader() {
    const data = useLoaderData();
  return (
    <div>
      <h1>Github Followers: {data.followers} </h1>
      <img src={data.avatar_url} alt="avatar" width="200" />
    </div>
  );
}

githubinfo.js



export const githubLoaderInfo = async () => {
    const response = await fetch("https://api.github.com/users/username");
    return response.json();
}

We can declare the upper function in the component also but it is not considered a good practice.

useId

Pritpal Singh — Fri, 13 Sep 2024 09:43:05 +0000

The useId hook in React is useful for generating unique IDs that you can use for accessibility or to avoid conflicts when multiple elements need the same ID in a component.

Why Use `useId`?

Sometimes, you need unique IDs for elements, like in forms where labels and inputs need to be connected. useId helps generate these IDs automatically, ensuring they are unique, even if you use the same component multiple times.

How to Use `useId`

Import useId from React: You first need to import useId at the top of your component.

   import { useId } from 'react';

Using useId to Generate Unique IDs: Inside your component, call useId to generate an ID. This ID can then be used for any HTML element.

   function MyForm() {
     const id = useId(); // Generate a unique ID

     return (
       <div>
         <label htmlFor={id}>Username:</label>
         <input id={id} type="text" />
       </div>
     );
   }

Explanation:

useId() generates a unique ID when the component is rendered.
We assign that unique ID to both the <label> (htmlFor={id}) and the <input> (id={id}) elements. This connects the label to the input.

Result: When React renders the component, useId will generate something like :r0: or :r1: for the id values. This ensures that even if you use multiple <MyForm /> components on the page, each input field will have a unique ID.

Key Points:

useId is helpful when building reusable components where IDs are needed.
The hook is especially useful when working with forms, accessibility, and ensuring unique IDs in complex components.

useRef

Pritpal Singh — Thu, 12 Sep 2024 05:27:15 +0000

What is `useRef`?

The useRef hook in React is used to access and interact with DOM elements directly or to keep a mutable value that does not cause re-renders when changed. It provides a way to persist values across renders without triggering a component update.

How `useRef` Works

useRef returns a mutable object called a "ref object" with a .current property. This property can hold a value that persists across re-renders.

Basic Syntax

const myRef = useRef(initialValue);

initialValue: The initial value for the ref object. This is optional.

Example 1: Accessing DOM Elements

In this example, we'll use useRef to access a DOM element directly.

Create the Component

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

   const FocusInput = () => {
     // Create a ref with useRef
     const inputRef = useRef(null);

     useEffect(() => {
       // Focus the input field when the component mounts
       inputRef.current.focus();
     }, []);

     return (
       <div>
         <input ref={inputRef} type="text" placeholder="Focus me on mount" />
       </div>
     );
   };

   export default FocusInput;

Explanation:

useRef(null) creates a ref object.
inputRef.current gives access to the input element.
useEffect is used to focus the input field when the component mounts.

Example 2: Keeping Mutable Values

In this example, we'll use useRef to keep a mutable value that does not cause re-renders when updated.

Create the Component

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

   const Timer = () => {
     const [count, setCount] = useState(0);
     const timerRef = useRef(null);

     const startTimer = () => {
       if (timerRef.current) {
         clearInterval(timerRef.current);
       }
       timerRef.current = setInterval(() => {
         setCount(prevCount => prevCount + 1);
       }, 1000);
     };

     const stopTimer = () => {
       if (timerRef.current) {
         clearInterval(timerRef.current);
       }
     };

     return (
       <div>
         <h1>Time: {count}s</h1>
         <button onClick={startTimer}>Start Timer</button>
         <button onClick={stopTimer}>Stop Timer</button>
       </div>
     );
   };

   export default Timer;

Explanation:

timerRef.current is used to store the timer ID.
startTimer and stopTimer functions use timerRef.current to manage the timer.
Updating timerRef.current does not cause a re-render of the component.

Summary

useRef creates a mutable ref object with a .current property.
Use useRef to access DOM elements directly.
Use useRef to keep mutable values that do not cause re-renders.

That’s it! useRef is a powerful and versatile hook that’s useful in many scenarios.

useEffect

Pritpal Singh — Wed, 11 Sep 2024 09:59:06 +0000

What is `useEffect`?

useEffect is a React hook that allows you to perform side effects in function components. Side effects are tasks that interact with the outside world, like:

Fetching data from an API
Setting up subscriptions (e.g., WebSockets)
Updating the document title
Changing some data outside the React component (like localStorage)

In simple terms, useEffect lets your component do something after it renders or when something changes.

Basic Syntax

useEffect(() => {
  // Code to run after the component renders or updates
});

This useEffect runs after every render by default.

Common Use Cases for `useEffect`:

Fetching data from an API
Subscribing to an event or updating an external system
Cleaning up resources (like clearing timers)

Example 1: Basic Usage

Let’s start with an example where we update the page title with the current counter value.

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

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

  // Using useEffect to update the document title
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

How does this work?

useEffect runs after every render: Every time you click the button and the count changes, useEffect runs and updates the document title.

Example 2: Controlling When `useEffect` Runs (Dependency Array)

Sometimes you don’t want the useEffect to run on every render, only when certain values change. You can control this using the dependency array.

useEffect(() => {
  // Code to run after component renders or when dependencies change
}, [dependency1, dependency2]);

If one of the dependencies in the array changes, useEffect will run again.
If the array is empty [], useEffect will only run once when the component first renders.

Example: Only Run `useEffect` Once

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

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

  // This useEffect will only run once when the component first renders
  useEffect(() => {
    console.log('Component mounted!');
  }, []);  // Empty dependency array

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

In this example:

The useEffect runs only once when the component mounts (i.e., when it is first added to the page).
It won’t run again, even if you click the button and update the count value.

Example 3: Using `useEffect` with Cleanup

Sometimes, components set up subscriptions or timers that need to be cleaned up when the component is removed (or unmounted). You can do this with useEffect by returning a cleanup function.

Example: Cleaning up a Timer

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval when the component unmounts
    return () => clearInterval(interval);
  }, []);  // Empty dependency array to run only on mount/unmount

  return (
    <div>
      <p>Timer: {seconds} seconds</p>
    </div>
  );
}

export default Timer;

How does this work?

Set up a timer: The setInterval function runs every second and updates the seconds state.
Cleanup: When the component is removed, clearInterval is called to stop the timer. The cleanup function is returned inside useEffect.

Summary of `useEffect` Behavior:

Run on every render: If you don't include a dependency array.

   useEffect(() => {
     // Runs after every render
   });

Run only once (when the component mounts):

   useEffect(() => {
     // Runs only once, after the initial render
   }, []);

Run when certain values change:

   useEffect(() => {
     // Runs when `count` changes
   }, [count]);

Cleanup: Return a cleanup function to stop or remove things (like timers or subscriptions) when the component unmounts.

   useEffect(() => {
     // Code to set up something

     return () => {
       // Code to clean up (runs when component unmounts)
     };
   }, []);

Key Points:

useEffect lets you perform side effects in your components.
By default, it runs after every render, but you can control when it runs using a dependency array.
Always remember to clean up resources like timers or subscriptions in the return function of useEffect to avoid memory leaks.

The lesson I provided covers the core concepts of useEffect, but there's more to learn about it, especially in advanced cases. Here's a list of additional details that can be helpful to understand useEffect thoroughly:

Additional Key Concepts for `useEffect`

Multiple useEffect Hooks:
- You can have more than one useEffect in a single component to handle different side effects independently.

   useEffect(() => {
     console.log("Effect 1");
   }, []);

   useEffect(() => {
     console.log("Effect 2");
   }, []);

These will run separately, allowing you to organize your side effects better.

Conditional Logic Inside useEffect:
- You can put conditional logic inside useEffect to only perform side effects based on certain conditions.

   useEffect(() => {
     if (someCondition) {
       // Execute side effect only if condition is met
     }
   }, [someCondition]);

Handling Async Code:
- useEffect doesn't directly support async functions, but you can call async functions inside it. This is common for data fetching.

   useEffect(() => {
     const fetchData = async () => {
       const result = await fetch('https://api.example.com/data');
       console.log(result);
     };
     fetchData();
   }, []);

Use with Dependencies: Pitfalls and Solutions:
- Always ensure that all dependencies (variables or state) used inside the useEffect are listed in the dependency array. This prevents stale closures, where the effect uses old values instead of updated ones.

   useEffect(() => {
     console.log(someVar); // If `someVar` changes, the effect should re-run
   }, [someVar]);

Pitfall: Missing a dependency can lead to bugs, like the effect not re-running when it should.
Solution: Use ESLint's React rules, which will warn you about missing dependencies.

Re-running the Effect:
- useEffect re-runs if any dependency changes. If you need a side effect that runs only once on mount or only when certain values change, manage it with the dependency array.
Common Use Cases for Cleanup:
- Event listeners: Adding and removing event listeners (e.g., window.addEventListener).
- WebSocket connections: Starting a WebSocket connection and closing it.
- Timers: Clearing timeouts/intervals when the component unmounts.
Performance Considerations:
- useEffect can potentially cause performance issues if not used properly. For example, running an expensive operation or a data-fetching task on every render may slow down the app.
- Optimize by using dependency arrays and breaking complex logic into multiple effects.
Execution Order:
- Effects run after the render but before the DOM is painted.
- Cleanup functions (if any) run before the component is removed from the UI or before the next effect runs.
React Strict Mode and Double Execution:
- In React's strict mode (used in development), useEffect runs twice (mount/unmount and then mount again) to help identify potential issues. This doesn’t happen in production.

Handling Race Conditions in Async Effects:

If you trigger an API call within useEffect, but the component unmounts before the request completes, you could end up updating the state of an unmounted component (causing a memory leak).
Solution: Abort the API request or use a cancelled flag.

useEffect(() => {
  let isCancelled = false;
  const fetchData = async () => {
    const response = await fetch('https://api.example.com');
    if (!isCancelled) {
      // Update state here only if the component is still mounted
    }
  };
  fetchData();
  return () => {
    isCancelled = true; // Cleanup to prevent updating unmounted component
  };
}, []);

However, for complete mastery of useEffect, you should also understand:

Handling async operations and race conditions
Performance considerations in larger apps
Advanced use cases with multiple useEffect hooks and complex state
React's behavior in strict mode (e.g., double execution in dev mode)

useCallback

Pritpal Singh — Tue, 10 Sep 2024 16:59:00 +0000

What is `useCallback`?

useCallback is a React hook that helps optimize performance by memoizing a function. In simple terms, it remembers a function so that it doesn’t get recreated every time a component re-renders, which can prevent unnecessary work.

Think of memoization as caching a value so that it does not need to be recalculated.

Why do we need `useCallback`?

In React, whenever a component re-renders, everything inside it gets recreated, including functions. This can cause problems:

Performance issues: If the function is doing heavy work, re-creating it every render can slow down your app.
Unnecessary re-renders: If you pass a function as a prop to a child component, and that function gets recreated every time, it might trigger re-renders in the child component even if nothing else changes.

To avoid these issues, we use useCallback.

How does `useCallback` work?

The useCallback hook tells React: “Hey, remember this function and only recreate it if certain dependencies change.” This helps React to reuse the same function on subsequent renders unless there’s a need to recreate it.

Syntax of `useCallback`

const memoizedFunction = useCallback(() => {
  // function logic
}, [dependency1, dependency2]);

useCallback takes two arguments:
1. A function: This is the function that React should "remember."
2. A dependency array: React will only recreate the function if any of the values in this array change.

Example Without `useCallback`

Let’s take a simple example where we have a button that increases a counter, and we have a function that prints the current count.

import React, { useState } from 'react';

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

  const logCount = () => {
    console.log('Current count:', count);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={logCount}>Log Count</button>
    </div>
  );
}

export default Counter;

What’s the issue here?

In this example, every time the counter is updated, the Counter component re-renders, and the logCount function is recreated even though its logic hasn’t changed. This isn’t a big problem here because the function is small, but in larger apps, this could be a performance issue.

Example With `useCallback`

Now, we’ll use useCallback to memoize the logCount function so it only gets recreated when necessary:

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

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

  const logCount = useCallback(() => {
    console.log('Current count:', count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={logCount}>Log Count</button>
    </div>
  );
}

export default Counter;

How does this help?

The logCount function will now only be recreated when the value of count changes.
If count doesn’t change, the same function is used across renders, improving performance.

Key Points to Understand

Memoization: useCallback remembers a function between renders.
Dependency Array: The function is only recreated if one of the values in the dependency array changes.
When to use: Use useCallback when:
- You’re passing functions to child components.
- You have expensive functions inside a component that shouldn’t be recreated unnecessarily.

A Practical Example: Parent-Child Component Interaction

If you have a child component that accepts a function as a prop, and the parent component re-renders, the child could re-render too, even if its props haven’t really changed. This is where useCallback becomes very useful.

Example without `useCallback`:

import React, { useState } from 'react';

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

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

  return (
    <div>
      <Child onIncrement={increment} />
      <p>Count: {count}</p>
    </div>
  );
}

function Child({ onIncrement }) {
  console.log('Child component re-rendered!');
  return <button onClick={onIncrement}>Increment</button>;
}

export default Parent;

Here, every time the Parent re-renders (for any reason), the increment function is recreated, causing the Child to re-render, even if the child’s onIncrement prop hasn’t changed.

Example with `useCallback`:

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

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

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <Child onIncrement={increment} />
      <p>Count: {count}</p>
    </div>
  );
}

function Child({ onIncrement }) {
  console.log('Child component re-rendered!');
  return <button onClick={onIncrement}>Increment</button>;
}

export default Parent;

Now, the increment function is only recreated when count changes. So, the Child component will only re-render if the onIncrement function changes.

When Not to Use `useCallback`

While useCallback is useful, you don’t need to use it everywhere. It’s most beneficial when:

You are passing functions to child components.
The function does some heavy or expensive calculation.

In most simple cases, React’s default re-render behavior is efficient enough, and using useCallback everywhere can actually add complexity without much performance gain.

Conclusion

useCallback is a powerful tool for performance optimization in React.
It helps by memoizing a function and recreating it only when necessary, based on its dependencies.
Use it when you have expensive functions or are passing functions to child components that could lead to unnecessary re-renders.

It’s best used when you start noticing performance issues in your app due to frequent re-renders!

Some Good Resources- https://lo-victoria.com/a-look-at-react-hooks-usecallback

Learn Express.js

Pritpal Singh — Fri, 26 Jan 2024 12:06:48 +0000

Node.js is a runtime environment for running Javascript on servers(outside browsers).

Express.js is a Node.js web framework for building APIs and web applications using JavaScript.

1. Now see the following code:

const express = require('express');
const app = express();

Here, we are using the require function to import the Express.js framework for using it in our application.
In the following line of code, we execute express(). This creates an instance of the Express application and stores it in the app variable. This variable can be used to define the routes, middleware, and other components of your web application.

2. Routing and HTTP Methods

Web frameworks provide resources such as HTML pages, scripts, images, etc. at different routes.

2.1. Define Routes

The following function is used to define routes in an Express application −
app.method(path, handler)

This METHOD can be applied to any one of the HTTP verbs – get, set, put, delete.
Path is the route at which the request will run.
Handler is a callback function that executes when a matching request type is found on the relevant route.

2.2. HTTP Methods

app.get('/',(req,res)=>{ 
  console.log("Hello World");
})

-The get method is used to send a request to the server to retrieve data.

In addition, there are other fundamental methods such as POST, PUT and DELETE.
In this second line, we are printing Hello World.

3. Middleware

"A middleware is a function that sits between the request (req) and response (res) objects in an application's processing pipeline."
Middleware functions are functions that have access to the request object (req), the response object (res), and the next function in the application’s request-response cycle.

Middleware functions are executed in the order they are declared in the application. Each middleware function has access to the next function, which is used to pass control to the next middleware in the stack.

app.use((req, res, next) => {
  console.log('This middleware runs first');
  next();
});

const myMiddleware = (req, res, next) => {
  console.log('This is a custom middleware');
  next(); // Call the next middleware in the stack
};

app.use(myMiddleware);

4. Dynamic Routing

const express = require('express');
const app = express();

app.get('/:username',(req,res)=>{ 
  res.send(`Welcome ${req.params.username}`);
})

app.listen(5000);

We are displaying the request we sent as a query.
To receive a response from the server on the window, the send method is used.
The code app.listen(5000) indicates that it is being executed on port number 5000.

5. Template Engine

HTML is not equipped to perform calculations or JavaScript operations. In the backend, web developers do not use HTML directly. Instead, they use template engines such as Ejs, Pug, and others to create HTML templates. These template engines are often used to create dynamic web pages.

5.1. EJS

Embedded JavaScript templating is a simple templating language that lets you generate HTML markup with plain JavaScript.

Install EJS

npm i ejs

Configure EJS

app.set("view engine",""ejs")

To proceed, please create a folder named 'views' and then create ejs files inside it.
Instead of using the send method, we use the render method to automatically locate the ejs file (within the views folder).
To use JavaScript inside Embedded JavaScript (EJS), we can simply declare it within <%- -%> tags.
When passing values to ejs, always declare them as <%= value %>.

5.2. EJS use case

We will create a 'views' folder and create two ejs files inside it.
The first file is named header.ejs:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
</head>

<body>
    <h1>Welcome <%=user.name %>
    </h1>

The second file is named hello.ejs:

<%- include('header'); -%> //here we are rendering header file inside another ejs file which is possible.
    <h2>Email : <%=user.email %></h2>
    <h3>Age : <%=user.age %></h3>
    <ul>
        <% user.skills.forEach((items)=>{ %>
            <li><%=items %></li>
        <% }) %>
    </ul>
</body>
</html>

In our JavaScript file, we will use the EJS file to display/render the content.

const express = require('express');
const app = express();

app.set('view engine','ejs');
app.get('/hello',(req,res)=>{
    const user = {
        name: 'abcde',
        email: 'abc@xyz.in',
        age: 20,
        skills: ['html','css','Js','React','Nodejs']
    }
    res.render('hello',{user});  
});

app.listen(5080);

The render method sends a user object to the hello.ejs file and then renders it.

6. Static Files

Static files, such as images, JavaScript, and stylesheets, are used in web applications.
We will create a 'public' folder containing three subfolders named images, javascripts, and stylesheets.
Now, we will use this code in our file to make use of static files:

app.use(express.static('./public'))

Now we no longer need to specify the full address of a static file to use it. For example, if we want to use a CSS file, we only need to provide the link as ./stylesheets/style.css instead of ./public/stylesheets/style.css.

7. Error Handling

Error Handling refers to how Express catches and processes errors that occur both synchronously and asynchronously.

Now declare this after the last route declared:

app.use(function errorHandler (err, req, res, next) {
  if (res.headersSent) {
    return next(err)
  }
  res.status(500)
  res.render('error', { error: err })
})

We are storing the error message, referred to as err, in a variable called error. This variable is then sent to the route named ./error.

app.get('/error', (req, res, next) => {
  throw new Error('BROKEN')
})

We are storing the word 'BROKEN' in the 'error' variable. -Whatever ejs view we set to the ./error route can display this text using <%= error %> tag.

8. Express Generator

Use the application generator tool, express-generator, to quickly create an application skeleton.
To install it:

 npm install -g express-generator

After installation, we need to create an Express application:

express myapp --view=ejs
npm i

After executing the command in the terminal, the entire structure that we previously had to create manually is now generated automatically, and two new folders named "routes" and "bin" are also created.
Instead of using app.get(), we will now use route.get() to handle our routing.

To run the application:

npm start

npm nodemon

nodemon is a package that eliminates the need to manually save and reload code, making programming more efficient.

9. Sessions and Cookies

Sessions are data that are stored on the server while Cookies are data that are stored on the client side.

9.1. Sessions

Sessions are more secure than cookies as it is saved on the server side.
To proceed with the task, we must first install 'express-session' and then add it to the 'app.js' file.

Then do the following coding:

app.use(expressSession({
resave: false,
saveUninitialized: false,
secret: "rndomxxxx"
}))

The term "resave" refers to the action of not saving the session if there have been no changes in the values.
saveUninitialized means don't save the data which is not defined.
secret is the encryption string.

app.get("/",function (req,res){
req.session.ban= true;
res.render("index")
})

app.get("/removeban",function (req,res){
req.session.ban= false;
res.send("ban remmoved")
})

We are setting the value of a variable to "true" but for route"/". The variable can be named anything.

app.get("/checkban",function (req,res){
console.log(req.session)
})

To delete any session manually we will need to write req.session.destroy.

**Note: **The sessions are automatically deleted upon restarting.

9.2. Cookies

To proceed with the task, we must first install 'cookie-parse' and then add it to the 'app.js' file.

Then add this to the app.js:

app.use(cookieParser())

Create a Cookie:

app.get("/",function (req,res){
res,cookie("age",25);
res.render("index")
})

We are setting the value of a variable named age to "25" but for route"/". The variable can be named anything.

Reading Cookies:

app.get("/read",function (req,res){
console.log(req.cookies);
res.send("check")
})

To get specific cookie, we will use req.cookies.age.

Delete a Cookie:

app.get("/clear",function (req,res){
res.clearCookie("age");
res.send("cleared")
})

10. Connect-Flash

We will be using a package called connect-flash to flash messages.
This package enables data transfer between routes using sessions, without which it will not function.

const flash = require("connect-flash")

app.use(expressSession({
resave: false,
saveUninitialized: false,
secret: "rndomxxxx"
}))
app.use(flash())

We can now utilize the flash.

app.get("/pass",function (req,res){
req.flash("age",17);
req.flash("name","ABC");
res.send("created")
})

app.get("/check",function (req,res){
console.log(req.flash("age"),req.flash("name"))
})

All about Python Dictionaries

Pritpal Singh — Sun, 06 Jun 2021 13:28:48 +0000

Python Program to understand dictionaries.

1. Here I am creating a dictionary.

my_dict1 = {}

using {} for declaring an empty dictionary as dictionaries are declared using {}.

my_dict2 = dict()

using dict() is also a way to declare an empty dictionary.

2. In dictionary we use pairs of key:values.

my_dict1 = {'fruit' : 'apple', 'drink' : "pepsi"}

here we used fruit and drink as a key and apple and pepsi as their values resp.
we can't have two or more keys with same name.

my_dict2 = {'vegetable' : 'carrot', 'fruit' : my_dict1}

here we are declaring a nested dictionary.

3. We can add and update elements in dictionay using a no. of methods. Use [] for accesing a key or adding and updating.

my_dict2['fruit'] =  'orange'

If we use a key which already exist then it updates the previous value.

my_dict2['snacks'] = 'chips', 'cookies'

we are assigning a no. of values to a key and it get stored in the form of tuple(or we can cast it)

my_dict2.update({'snacks' : 'chips'})

here we are updating the existing key and if key doesn't exist then it will add new key.

4. We can access a value inside dictionary using the key associated to it inside a [] and we can also use get method.

print(my_dict1['fruit'])

If key is not present in dictionary then it will give error.

print(type(my_dict1.get('snacks')))

the difference here is, in get(value, default='None') method will return none if key is not present in dictionary.
we can use two arguments in get(). It will return the second value if key is not present.

5. We can remove a key by using the del/clear/pop method.

del my_dict2["fruit"]

here we are deleting a item from the dictionary

my_dict2.pop('vegetable')

here we are using pop(key, default = 'None') method to remove a item from dictionary and return the value associated with key. If item not present in dictionary then it return the second argument.

my_dict2.popitem()

this method will remove the last inserted item in the dictionary and return it as a tuple.

my_dict2.clear()

this method will clear the dictionary.

del my_dict2

this will delete the dictionary.

6. Methods on Dictionaries.

keysl = my_dict1.keys()

it returns a list of keys.

values1 = my_dict1.values()

it returns a list of values in dictionary.

items1 = my_dict1.items()

it returns list of a given dictionary’s (key, value) tuple pair.

my_dict2=my_dict1.copy()

it copies my_dict1 into my_dict2

my_dict3 = dict(my_dict1)

this is also a way to copy a dictionary into another

below method returns a dictionary with the specified keys and the specified value(dictionary.fromkeys(keys,value))

my_dict2 = my_dict3.fromkeys('1', 'none') 
print(my_dict2)

dict_comb=my_dict1 | my_dict2

here we are combinig two dictionary

dict_comb2={**my_dict1, **my_dict2}

Using ** we first pass all the elements of the first dictionary into the third one and then pass the second dictionary into the third.

Forem: Pritpal Singh

Context in React: Better Approach

Provide Default Values in createContext

Exporting ContextProvider

Creating a Custom Hook for Easier Consumption

Benefits of This Structure:

Implementation

Context in React

The Problem with Passing Props

Get Started with the Context API

Routing in React with React Router Dom

Installation

BrowserRouter

Route

Outlet and Nested Routes

Link Tag

NavLink Tag and Active Links

useParams and Dynamic Segments

Data Loading

useId

Why Use useId?

How to Use useId

Key Points:

useRef

What is useRef?

How useRef Works

Basic Syntax

Example 1: Accessing DOM Elements

Example 2: Keeping Mutable Values

Summary

useEffect

What is useEffect?

Basic Syntax

Common Use Cases for useEffect:

Example 1: Basic Usage

How does this work?

Example 2: Controlling When useEffect Runs (Dependency Array)

Example: Only Run useEffect Once

Example 3: Using useEffect with Cleanup

Example: Cleaning up a Timer

How does this work?

Summary of useEffect Behavior:

Key Points:

Additional Key Concepts for useEffect

useCallback

What is useCallback?

Why do we need useCallback?

How does useCallback work?

Syntax of useCallback

Example Without useCallback

What’s the issue here?

Example With useCallback

How does this help?

Key Points to Understand

A Practical Example: Parent-Child Component Interaction

Example without useCallback:

Example with useCallback:

When Not to Use useCallback

Conclusion

Learn Express.js

1. Now see the following code:

2. Routing and HTTP Methods

3. Middleware

4. Dynamic Routing

5. Template Engine

6. Static Files

7. Error Handling

8. Express Generator

9. Sessions and Cookies

10. Connect-Flash

All about Python Dictionaries

Python Program to understand dictionaries.

1. Here I am creating a dictionary.

2. In dictionary we use pairs of key:values.

3. We can add and update elements in dictionay using a no. of methods. Use [] for accesing a key or adding and updating.

4. We can access a value inside dictionary using the key associated to it inside a [] and we can also use get method.

5. We can remove a key by using the del/clear/pop method.

6. Methods on Dictionaries.

Provide Default Values in `createContext`

Why Use `useId`?

How to Use `useId`

What is `useRef`?

How `useRef` Works

What is `useEffect`?

Common Use Cases for `useEffect`:

Example 2: Controlling When `useEffect` Runs (Dependency Array)

Example: Only Run `useEffect` Once

Example 3: Using `useEffect` with Cleanup

Summary of `useEffect` Behavior:

Additional Key Concepts for `useEffect`

What is `useCallback`?

Why do we need `useCallback`?

How does `useCallback` work?

Syntax of `useCallback`

Example Without `useCallback`

Example With `useCallback`

Example without `useCallback`:

Example with `useCallback`:

When Not to Use `useCallback`