DEV Community: _Khojiakbar_

Real DOM vs Virtual DOM

_Khojiakbar_ — Tue, 03 Sep 2024 16:52:38 +0000

1. Real DOM (Document Object Model)

What It Is: The Real DOM is the actual structure of the webpage, represented as a tree of objects. It is what the browser uses to render the HTML elements on the screen.
How It Works: When you update an element in the Real DOM (like changing text or adding a new element), the browser has to re-render that part of the page. This can be slow because the entire tree might need to be updated, even if only a small part changes.
Example: Imagine you’re in a library with a card catalog. Every time you change one card, you have to search through the whole catalog to update it. This takes time.
Pros:
1. Direct manipulation of the UI.
2. No additional abstraction layer.
Cons:
1. Slow updates because the whole UI might need to be refreshed.
2. High memory usage if the DOM is large.

2. Virtual DOM

What It Is: The Virtual DOM is a lightweight copy of the Real DOM. It’s a programming concept where a virtual representation of the UI is kept in memory and synced with the Real DOM using a library like React.
How It Works: When you update something in the Virtual DOM, it calculates the difference between the current state and the previous state (a process called "diffing"). Then, it only updates the parts of the Real DOM that actually changed.
Example: Imagine you have a digital card catalog on your computer. When you make a change, the computer quickly compares the old and new versions and only updates the specific card that changed. This is much faster.
Pros:
1. Faster updates because only the changed parts of the DOM are
re-rendered.
2. Efficient use of memory and processing power.
Cons:
1. Adds a layer of abstraction, which might be harder to debug.
2. Initial setup can be more complex compared to directly
manipulating the Real DOM.

Analogy

Real DOM: Like redecorating a room where you have to rearrange all the furniture whenever you buy a new chair.
Virtual DOM: Like using an app to visualize the room layout first, so you only move the furniture that actually needs to be moved when the new chair arrives.

The Virtual DOM helps improve performance by minimizing unnecessary updates to the Real DOM, making your applications run smoother and faster.

Layout with React Router v6

_Khojiakbar_ — Thu, 22 Aug 2024 18:10:38 +0000

Step 1: Setup React Router v6

npm i -D react-router-dom@latest

Step 2: Define Route Structure

Next, define the structure of your routes in the App.js file. We'll create routes for the home, about, and contact pages, and associate them with corresponding components.

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

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

export default App;

Step 3: Create Layout Component

Now, let’s create a layout component (Layout.js) that will contain our shared header and main content area.

// Layout.js
import React from 'react';
import { Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <header>
        <h1>My App</h1>
        <nav>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

export default Layout;

Step 4: Create Page Components

Create separate components for the home, about, and contact pages. These components will represent the content of each page.

Home Component

// Home.js
import React from 'react';

function Home() {
  return (
    <div>
      <h2>Home Page</h2>
      <p>Welcome to the home page!</p>
    </div>
  );
}

export default Home;

About Component

// About.js
import React from 'react';

function About() {
  return (
    <div>
      <h2>About Page</h2>
      <p>Learn more about us!</p>
    </div>
  );
}

export default About;

Contact Component

// Contact.js
import React from 'react';

function Contact() {
  return (
    <div>
      <h2>Contact Page</h2>
      <p>Reach out to us!</p>
    </div>
  );
}

export default Contact;

Conclusion

Congratulations! You’ve successfully built a layout using React Router v6, allowing you to navigate between different pages while maintaining a consistent layout across the application. This approach provides a clean and organized structure for your React applications with multiple routes. Experiment with adding more routes and components to further enhance your application!

React Router DOM

_Khojiakbar_ — Sun, 18 Aug 2024 04:04:19 +0000

Introduction to React Router DOM

Imagine your React app is a magical theme park, and each component is a different ride or attraction. But how do visitors (users) move from one ride to another without getting lost? Enter React Router DOM! It's like the park map that guides visitors smoothly from the Ferris wheel to the roller coaster without them wandering off

Setting Up React Router DOM

First, let’s install React Router DOM in your theme park:

npm install react-router-dom

Now your theme park has the perfect map installed!

Basic Concepts

1.BrowserRouter: This is like the park entrance. It wraps your entire app, so the router knows where to direct visitors.

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

function App() {
  return (
    <BrowserRouter>
      {/* Your park (app) components go here */}
    </BrowserRouter>
  );
}

Routes: These are the pathways to different rides (components) in your park. You tell the router where each path leads.

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />  {/* Home ride */}
        <Route path="/rollercoaster" element={<RollerCoaster />} />  {/* RollerCoaster ride */}
        <Route path="/ferriswheel" element={<FerrisWheel />} />  {/* FerrisWheel ride */}
      </Routes>
    </BrowserRouter>
  );
}

path: The route to your ride.
element: The component that corresponds to that route.

Link: This is the signpost that directs visitors to different rides. It’s like those arrows you see in parks pointing to different attractions.

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

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>  {/* Points to Home */}
      <Link to="/rollercoaster">RollerCoaster</Link>  {/* Points to RollerCoaster */}
      <Link to="/ferriswheel">Ferris Wheel</Link>  {/* Points to FerrisWheel */}
    </nav>
  );
}

Example: The Theme Park in Action

Let’s create a simple theme park app!

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

function App() {
  return (
    <BrowserRouter>
      <h1>Welcome to the React Theme Park!</h1>
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/rollercoaster" element={<RollerCoaster />} />
        <Route path="/ferriswheel" element={<FerrisWheel />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  return <h2>Home: The central plaza of the park!</h2>;
}

function RollerCoaster() {
  return <h2>RollerCoaster: Hold on tight, this ride is wild!</h2>;
}

function FerrisWheel() {
  return <h2>Ferris Wheel: Enjoy the view from up high!</h2>;
}

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/rollercoaster">RollerCoaster</Link>
      <Link to="/ferriswheel">Ferris Wheel</Link>
    </nav>
  );
}

export default App;

Summary

BrowserRouter: The entrance gate that wraps your entire app.
Routes: The map that shows paths to different rides (components).
Link: The signposts that help users navigate the park.

Now, with React Router DOM, your app is ready to guide users through all the exciting attractions smoothly! 🎢🎡

Getting Data with Axios

_Khojiakbar_ — Sat, 17 Aug 2024 06:10:25 +0000

The Candy Store Adventure

Imagine you really want some candy. There's a magical candy store in the sky (that's your backend) with all your favorite candies. But instead of going there yourself, you send your pet squirrel, Nutty, to get it for you. And Nutty is super fast—just like Axios!

Step 1: Install Axios

First, you need to give Nutty the ability to fly (install Axios).

npm install axios

Step 2: Send Nutty to the Candy Store

Now, let's send Nutty to the candy store to grab some candies (data). Here's how you can do it in your React component:

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

function CandyStore() {
  const [candies, setCandies] = useState([]); // Empty candy bag

  useEffect(() => {
    // Send Nutty to the candy store
    axios.get('https://example.com/candies')
      .then(response => {
        // Nutty comes back with candies!
        setCandies(response.data);
      })
      .catch(error => {
        // Uh-oh, Nutty got distracted by shiny objects!
        console.error("Nutty couldn't get the candies!", error);
      });
  }, []);

  return (
    <div>
      <h1>My Candy Collection</h1>
      <ul>
        {candies.map(candy => (
          <li key={candy.id}>{candy.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default CandyStore;

Step 3: How It Works (Nutty’s Candy Haul)

useState([]): This is your empty candy bag, ready to be filled with delicious treats.
useEffect(() => { ... }, []): As soon as you open the candy bag, you tell Nutty to fly off to the candy store (the component mounts).
axios.get('https://example.com/candies'): Nutty flies to the candy store to get all the candies.
.then(response => { ... }): Nutty comes back with a bag full of candies and drops them in your candy bag (setCandies).
.catch(error => { ... }): Oh no! Nutty got distracted by shiny objects and couldn’t find the candy store. You give him a little pep talk.

Step 4: Enjoy the Candy!

Finally, you pour out all the candies Nutty brought back and enjoy them one by one. Each candy is a sweet item in your unordered list (

What You’ve Learned

Axios is like Nutty, your super-fast pet squirrel who fetches data (candies) for you.
You can use axios.get() to send Nutty on a candy run.
then() is when Nutty comes back with candies, and catch() is when Nutty gets distracted.

Now, you can send Nutty on a candy run (fetch data) anytime you want with Axios in React! 🍬🐿️

Header in React

_Khojiakbar_ — Wed, 14 Aug 2024 13:15:47 +0000

import { About, Location, Careers, Error } from "../views"; // Importing components from the 'views' directory
import { Routes, Route } from 'react-router-dom'; // Importing React Router DOM components
import Header from './Header'; // Importing the Header component
import Footer from './Footer'; // Importing the Footer component
import MainSection from './MainSection'; // Importing the MainSection component

// Defining the routes and their corresponding components
export const routerLinks = [
    {
        id: 1,
        path: '/about',
        component: <About/>,
        title: "About"
    },
    {
        id: 2,
        path: '/location',
        component: <Location/>,
        title: "Location"
    },
    {
        id: 3,
        path: '/careers',
        component: <Careers/>,
        title: "Careers"
    },
    {
        id: 4,
        path: '*', // This acts as a catch-all for undefined routes
        component: <Error/>
    }
];

// Main App component
const App = () => {
  return (
    <>
      <MainSection>
        <Header/>  {/* Header component */}
        <Routes>  {/* React Router DOM Routes component */}
          {
            routerLinks.length && 
            routerLinks.map((item) => 
            <Route key={item.id} path={item.path} element={item.component}/>)
          }
        </Routes>
        <Footer/>  {/* Footer component */}
      </MainSection>
    </>
  );
};

export default App;

Explanation:

Import Statements: The code imports necessary components like About, Location, Careers, Error, and other UI components like Header, Footer, and MainSection.

routerLinks Array: This array contains objects, each representing a route in the application. It includes:

id: A unique identifier for each route.
path: The URL path that triggers the route.
component: The component that will be rendered when the route is matched.
title: A title for the route (optional).

App Component:

The App component wraps the application content inside the MainSection.
It includes a Header at the top, followed by the Routes component, which renders the routes based on the routerLinks array.
Each route is mapped to a Route component using the map() function.
The Footer is placed at the bottom of the page.
This setup allows you to easily manage and add new routes in the routerLinks array.

Header in React

_Khojiakbar_ — Wed, 14 Aug 2024 13:15:47 +0000

import { About, Location, Careers, Error } from "../views"; // Importing components from the 'views' directory
import { Routes, Route } from 'react-router-dom'; // Importing React Router DOM components
import Header from './Header'; // Importing the Header component
import Footer from './Footer'; // Importing the Footer component
import MainSection from './MainSection'; // Importing the MainSection component

// Defining the routes and their corresponding components
export const routerLinks = [
    {
        id: 1,
        path: '/about',
        component: <About/>,
        title: "About"
    },
    {
        id: 2,
        path: '/location',
        component: <Location/>,
        title: "Location"
    },
    {
        id: 3,
        path: '/careers',
        component: <Careers/>,
        title: "Careers"
    },
    {
        id: 4,
        path: '*', // This acts as a catch-all for undefined routes
        component: <Error/>
    }
];

// Main App component
const App = () => {
  return (
    <>
      <MainSection>
        <Header/>  {/* Header component */}
        <Routes>  {/* React Router DOM Routes component */}
          {
            routerLinks.length && 
            routerLinks.map((item) => 
            <Route key={item.id} path={item.path} element={item.component}/>)
          }
        </Routes>
        <Footer/>  {/* Footer component */}
      </MainSection>
    </>
  );
};

export default App;

Explanation:

Import Statements: The code imports necessary components like About, Location, Careers, Error, and other UI components like Header, Footer, and MainSection.

routerLinks Array: This array contains objects, each representing a route in the application. It includes:

App Component:

useContext() in React . . .

_Khojiakbar_ — Sat, 10 Aug 2024 09:44:40 +0000

The Story of Captain Context and the Treasure Map

What is useContext?

Imagine you're on a pirate ship, and you're the captain. You have a treasure map, and everyone on your crew needs to see it to find the treasure. You could make copies of the map and give one to each crew member, but that would be a lot of work. Plus, what if the map changes? You’d have to update every single copy—what a headache!

Instead, you decide to hang the original map in the middle of the ship, where everyone can see it whenever they need to. No running around, no confusion—just easy access to the treasure map. In React, this central map is like useContext.

Why do we use useContext?

In a React app, different components often need access to the same "treasure map" (like user settings, themes, or data). Without useContext, you’d have to pass the map through each component individually, which gets really messy—like a captain passing a map from one crew member to the next across the entire ship.

With useContext, you hang the map where everyone can reach it directly. Now all your crew (components) can see the treasure map without you having to hand it to them one by one.

How do we use useContext?

Create the Treasure Map (Context): First, you create the treasure map using createContext(). This is where the map’s details will be stored.

const TreasureMapContext = createContext();

2.** Hang Up the Map (Provider):** Next, you hang the map in a visible place using a Provider. This Provider wraps around the parts of your ship (components) that need to see the map.

function PirateShip() {
  const treasureMap = "X marks the spot!"; // This is the map everyone will follow.

  return (
    <TreasureMapContext.Provider value={treasureMap}>
      <Deck />
      <CrowNest />
    </TreasureMapContext.Provider>
  );
}

Read the Map (useContext): Now, any crew member (component) can check the map directly using useContext.

function Deck() {
  const treasureMap = useContext(TreasureMapContext);

  return <p>Arr! The map says: {treasureMap}!</p>;
}

function CrowNest() {
  const treasureMap = useContext(TreasureMapContext);

  return <p>Aye! I see the spot from up here: {treasureMap}!</p>;
}

Putting It All Together

Imagine your app is a pirate ship. You, the captain, have a treasure map that everyone on the ship needs. Instead of running around handing out copies, you hang the map up in a central place where everyone can see it. That’s useContext—a simple, efficient way to share important information across your entire app without the chaos of passing props everywhere.

Now, if your crew wants to find the treasure, they just take a peek at the map and sail straight to the gold!

memo() in React . . .

_Khojiakbar_ — Sat, 10 Aug 2024 02:28:42 +0000

Imagine you’re running a donut shop, and you’ve got a bunch of customers ordering the same donuts over and over. Every time someone orders a donut, you don't want to bake a new one if you already have a fresh one sitting on the counter. That would be a waste of time and ingredients, right?

In React, when you build an app, sometimes you have components that don't need to change unless their ingredients (props) change. This is where memo comes in handy. It’s like a magic wrapper that tells React, "Hey, if the ingredients (props) haven’t changed, just give me the same donut (component) that’s already on the counter. No need to bake a new one!"

How memo Works in Code

Let’s say we have a Donut component:

import React from 'react';

function Donut({ flavor }) {
  console.log(`Baking a ${flavor} donut...`);
  return <div>{flavor} donut</div>;
}

export default memo(Donut);

Here’s what’s happening:

1. Donut Shop: The Donut component is like a baker who makes donuts based on the flavor you give them.

2. Order: When you call the Donut component with a flavor, it bakes a donut and logs "Baking a [flavor] donut...".

3. memo: The memo wrapper is like a wise manager who says, "Hey, if the customer wants the same flavor again, just give them the one we already made."

Fun Sample

Let's make a little app where you can order donuts:

import React, { useState } from 'react';
import Donut from './Donut'; // Our donut component

function App() {
  const [flavor, setFlavor] = useState('chocolate');
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Donut Shop</h1>
      <Donut flavor={flavor} />
      <button onClick={() => setFlavor('chocolate')}>Order Chocolate</button>
      <button onClick={() => setFlavor('strawberry')}>Order Strawberry</button>
      <button onClick={() => setCount(count + 1)}>Click Counter {count}</button>
    </div>
  );
}

export default App;

What’s Happening Here?

Donut Component: The Donut component is baked only when the flavor changes.

Buttons:

Clicking "Order Chocolate" will order a chocolate donut.
Clicking "Order Strawberry" will order a strawberry donut.
Clicking "Click Counter" will increase a counter, but it doesn’t change the flavor.

memo in Action

If you click "Order Chocolate" over and over, _memo notices that the flavor isn’t changing and won’t log "Baking a chocolate donut..." again. But if you switch to "Order Strawberry", it will log "Baking a strawberry donut..."._

Why is This Cool?

memo saves React from doing unnecessary work. Just like in a real donut shop, you don’t want to bake a new donut if you already have one on the counter. It keeps things efficient and quick, just like giving customers their donuts faster!

Props Drilling . . .

_Khojiakbar_ — Fri, 09 Aug 2024 19:09:43 +0000

1. Setting Up the Pirates (Components)

We'll create a Captain, FirstMate, SecondMate, ThirdMate, and FourthMate component. The Captain will pass the "treasure map" (prop) down through each level to finally reach the FourthMate.

2. Props Drilling in Action

import React from 'react';

// Fourth Mate (Deep Child Component)
const FourthMate = ({ map }) => {
  return (
    <div>
      <h2>Fourth Mate</h2>
      <p>Arrr! I got the treasure map: {map}</p>
    </div>
  );
};

// Third Mate (Child Component)
const ThirdMate = ({ map }) => {
  return (
    <div>
      <h2>Third Mate</h2>
      <FourthMate map={map} />
    </div>
  );
};

// Second Mate (Child Component)
const SecondMate = ({ map }) => {
  return (
    <div>
      <h2>Second Mate</h2>
      <ThirdMate map={map} />
    </div>
  );
};

// First Mate (Child Component)
const FirstMate = ({ map }) => {
  return (
    <div>
      <h2>First Mate</h2>
      <SecondMate map={map} />
    </div>
  );
};

// Captain (Parent Component)
const Captain = () => {
  const treasureMap = "X marks the spot!";

  return (
    <div>
      <h1>Captain</h1>
      <p>"Ahoy! Take this map and find the treasure!"</p>
      <FirstMate map={treasureMap} />
    </div>
  );
};

// App Component
const App = () => {
  return (
    <div>
      <Captain />
    </div>
  );
};

export default App;

3. Explanation

Captain Component: The parent component holds the treasureMap data and starts the props drilling by passing it to the FirstMate.
FirstMate Component: Receives the map prop from Captain and passes it to SecondMate.
SecondMate Component: Receives the map prop from FirstMate and passes it to ThirdMate.
ThirdMate Component: Receives the map prop from SecondMate and passes it to FourthMate.
FourthMate Component: Finally receives the map prop and displays it.

This code mimics the pirate crew passing the treasure map down through the ship's decks until it reaches the one who needs it most!

useRef() in React . . .

_Khojiakbar_ — Wed, 07 Aug 2024 16:35:59 +0000

The Magical Mirror: Understanding `useRef`

Imagine you have a magical mirror. This mirror can remember a special spot in your room. Whenever you look into the mirror, it points to that exact spot, even if you move things around in your room.

In React, useRef is like this magical mirror. It helps you keep track of a special spot (or reference) in your code.

The Story of Timmy and His Toy Box

Meet Timmy

Timmy loves playing with his toys. He has a magical toy box where he keeps all his toys. One day, Timmy decides he wants to remember where his favorite toy robot is, even if he adds more toys to the box or moves them around.

Timmy's Magical Marker: `useRef`

Timmy uses a magical marker (like useRef) to mark the spot where his toy robot is in the toy box. No matter how many toys he adds or how much he moves them, the magical marker always knows where the toy robot is.

How `useRef` Works in Code

Let's see how Timmy's magical marker works in React:

Funny Sample with Timmy

The Robot Naming Game

Timmy wants to give his robot a name. He uses useRef to remember what he named it, even if he forgets!

import React, { useRef } from 'react';

function RobotNaming() {
  const robotNameRef = useRef(null);

  const nameRobot = () => {
    alert(`The robot's name is: ${robotNameRef.current.value}`);
  };

  return (
    <div>
      <input type="text" ref={robotNameRef} placeholder="Name the Robot" />
      <button onClick={nameRobot}>Name Robot</button>
    </div>
  );
}

export default RobotNaming;

Summary

Timmy's magical marker, the useRef hook, helps him keep track of his favorite toy robot's spot, even if things change in his toy box. Similarly, useRef in React helps you keep track of references to DOM elements or other values without causing the component to re-render. It's like having a magical marker that always knows where your important stuff is!

React component lifecycle . . .

_Khojiakbar_ — Wed, 07 Aug 2024 15:53:20 +0000

Imagine a Little Plant 🌱

Think of a React component as a little plant. This plant goes through different stages of its life, just like your component does. The stages are:

Seeding (Mounting) 🌱
Growing (Updating) 🌿
Wilting (Unmounting) 🍂

Stage 1: Seeding (Mounting) 🌱

When you plant a seed, it starts to grow roots and leaves. In React, this is when a component is created and put into the DOM (the web page).

useEffect(() => {...}, []): This is when the plant has sprouted and is fully in the garden. This hook runs after the component has been added to the DOM. It’s a great place to fetch data from an API or set up timers.

import React, { useEffect } from 'react';

function Plant() {
  useEffect(() => {
    console.log('Plant has sprouted!');
  }, []);

  return <div>🌱</div>;
}

Stage 2: Growing (Updating) 🌿

Now, our little plant is growing. It gets taller, maybe grows some flowers. In React, this is when a component updates because it received new props or its state changed.

useEffect(() => {...}, [state]): This is like checking if the plant has grown since the last time you looked at it. This hook runs after the component has updated.

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

function Plant() {
  const [size, setSize] = useState('small');

  useEffect(() => {
    console.log('Plant has sprouted!');
  }, []);

  useEffect(() => {
    console.log(`Plant grew to ${size}!`);
  }, [size]);

  const grow = () => {
    setSize('large');
  };

  return (
    <div>
      🌿
      <button onClick={grow}>Grow</button>
    </div>
  );
}

Stage 3: Wilting (Unmounting) 🍂

Every plant eventually wilts and dies. In React, this is when a component is removed from the DOM.

useEffect(() => {... return () => {...} }, []): This is like when you remove the wilted plant from the garden. You might clean up any mess it left, like taking away the pot or turning off the watering system. The cleanup function runs when the component is removed.

import React, { useEffect } from 'react';

function Plant() {
  useEffect(() => {
    console.log('Plant has sprouted!');

    return () => {
      console.log('Plant is wilting away...');
    };
  }, []);

  return <div>🍂</div>;
}

Why is the Lifecycle Important?

Understanding the lifecycle helps you know when to do certain things in your component, like:

_Fetching data when the component is first added to the page (useEffect with an empty dependency array []).
Performing actions when the component updates (useEffect with dependencies [state]).
Cleaning up resources (like removing event listeners or canceling network requests) when the component is removed (cleanup function inside useEffect).

By following these stages, you ensure your component behaves correctly and efficiently throughout its life on the web page._

Key in React . . .

_Khojiakbar_ — Wed, 07 Aug 2024 07:13:20 +0000

In React, the key attribute is crucial for rendering lists of elements efficiently. Here’s a breakdown of why it's necessary and how to use it.

Why is key necessary?

1. Identification: React uses keys to identify which items have changed, are added, or are removed. This helps React to update only the necessary parts of the DOM, making rendering faster and more efficient.

2. Optimization: Without keys, React would re-render the entire list every time there’s a change. With keys, React can keep track of each element and ensure only the modified elements are updated.

3. Consistency: Keys help maintain component state and avoid unexpected behaviors, especially when components are added, removed, or reordered.

How to use `key`

Unique Identifier: Keys should be unique among siblings. A common practice is to use a unique identifier from your data (e.g., an ID).
Stable Identity: Keys should remain consistent across renders. Avoid using random values or indices if the list order can change.

Here's an example to illustrate:

Example: Rendering a list of todo items

import React from 'react';

const TodoList = ({ todos }) => {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

In this example, each todo item has a unique id which is used as the key.

What happens without key?

Imagine a list of todos being updated:

import React, { useState } from 'react';

const TodoApp = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Practice Coding' },
    { id: 3, text: 'Read a Book' },
  ]);

  const addTodo = () => {
    setTodos([
      ...todos,
      { id: Math.random(), text: 'New Todo' }
    ]);
  };

  return (
    <div>
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

In the above example, using the array index as the key might cause unexpected issues if the list is reordered or items are added/removed. It could lead to inefficient updates and loss of component state.

Funny Analogy:

Imagine you’re a librarian and you need to find a specific book on a shelf. If every time you look for a book, the books are rearranged randomly (no unique keys), it would be a nightmare! However, if each book has a unique tag (a key), you can quickly locate and update the right book without shuffling through the entire shelf.

In summary, using keys in React helps to maintain order, optimize rendering, and ensure smooth updates, much like how unique tags help a librarian manage a library efficiently.

DEV Community: _Khojiakbar_

Real DOM vs Virtual DOM

1. Real DOM (Document Object Model)

2. Virtual DOM

Analogy

Layout with React Router v6

Step 1: Setup React Router v6

Step 2: Define Route Structure

Step 3: Create Layout Component

Step 4: Create Page Components

Home Component

About Component

Contact Component

Conclusion

React Router DOM

Introduction to React Router DOM

Setting Up React Router DOM

Basic Concepts

Example: The Theme Park in Action

Summary

Getting Data with Axios

The Candy Store Adventure

Step 1: Install Axios

Step 2: Send Nutty to the Candy Store

Step 3: How It Works (Nutty’s Candy Haul)

Step 4: Enjoy the Candy!

What You’ve Learned

Header in React

Explanation:

App Component:

Header in React

Explanation:

App Component:

useContext() in React . . .

The Story of Captain Context and the Treasure Map

What is useContext?

Why do we use useContext?

How do we use useContext?

Putting It All Together

memo() in React . . .

How memo Works in Code

Fun Sample

What’s Happening Here?

memo in Action

Why is This Cool?

Props Drilling . . .

1. Setting Up the Pirates (Components)

2. Props Drilling in Action

3. Explanation

useRef() in React . . .

The Magical Mirror: Understanding useRef

The Story of Timmy and His Toy Box

Meet Timmy

Timmy's Magical Marker: useRef

How useRef Works in Code

Funny Sample with Timmy

The Robot Naming Game

Summary

React component lifecycle . . .

Imagine a Little Plant 🌱

Stage 1: Seeding (Mounting) 🌱

Stage 2: Growing (Updating) 🌿

Stage 3: Wilting (Unmounting) 🍂

Why is the Lifecycle Important?

Key in React . . .

Why is key necessary?

How to use key

Example: Rendering a list of todo items

What happens without key?

Funny Analogy:

The Magical Mirror: Understanding `useRef`

Timmy's Magical Marker: `useRef`

How `useRef` Works in Code

How to use `key`