واکنش: مفاهیم اساسی و بهترین شیوه ها

export default function App() {
  const cars = [
    {
      name: "Lightning McQueen ⚡️",
      image:
        "https://i.pinimg.com/1200x/c4/50/07/c45007f8ec1d37926d87befde23ec323.jpg",
    },
    // ...
  ];

  return (
    <div className="App">
      <Container cars={cars} />
    </div>
  );
}

function Container({ cars }) {
  let title = "Participants";
  const [isTitleUppercase, setTitleUppercase] = useState(false);

  const generateExtraParams = () => {
    return {
      position: 1,
      selfConfidence: Infinity,
    };
  };

  const handleClick = () => {
    setTitleUppercase((prev) => !prev);
  };

  return (
    <>
      <header>
        <h1>{isTitleUppercase ? title.toUpperCase() : title}</h1>{" "}
        <button onClick={handleClick}>Case toggle 🖲️</button>
      </header>
      <main>
        {cars.map((car, index) => (
          <CarCard
            key={index}
            car={car}
            // extraParams={generateExtraParams()}
          />
        ))}
      </main>
    </>
  );
}

function CarCard({ car, extraParams }) {
  console.log(`🏎️ Ka-Chow! ⚡️⚡️⚡️`);

  return (
    <>
      <p>{car.name}</p>
      <div id="iw">
        <img src={car.image} width={100} />
      </div>

      {extraParams &&
        Object.entries(extraParams).map(([key, value]) => (
          <p key={Math.random()}>
            <i>{key}:</i> {value}
          </p>
        ))}
    </>
  );
}

const CarCard = React.memo(function ({ car, extraParams }) {
  console.log(`🏎️ Ka-Chow! ⚡️⚡️⚡️`);

  return (
    <>
      <p>{car.name}</p>
      <div id="iw">
        <img src={car.image} width={100} />
      </div>

      {extraParams &&
        Object.entries(extraParams).map(([key, value]) => (
          <p key={Math.random()}>
            <i>{key}:</i> {value}
          </p>
        ))}
    </>
  );
});

const generateExtraParams = () => {
  return {
    position: 1,
    selfConfidence: Infinity,
  };
};

const extraParams = React.useMemo(() => generateExtraParams(), []);

const useToggle = () => {
  const [isTitleUppercase, setTitleUppercase] = useState(false);

  const toggle = () => {
    setTitleUppercase((prev) => !prev);
  };

  return [isTitleUppercase, toggle];
};

// Inside the Container
const [isTitleUppercase, toggle] = useToggle();

// And use it like this:
<header>
  <h1>{isTitleUppercase ? title.toUpperCase() : title}</h1>{" "}
  <button onClick={toggle}>Case toggle 🖲️</button>
</header>

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

const CarsContext = createContext([]);
const useCarsContext = () => useContext(CarsContext);

export default function App() {
  const cars = [
    {
      name: "Lightning McQueen ⚡️",
      image:
        "https://i.pinimg.com/1200x/c4/50/07/c45007f8ec1d37926d87befde23ec323.jpg",
    },
    // ...
  ];

  return (
    <CarsContext.Provider value={cars}>
      <div className="App">
        <Container />
      </div>
    </CarsContext.Provider>
  );
}

const useToggle = () => {
  const [isTitleUppercase, setTitleUppercase] = useState(false);

  const toggle = () => {
    setTitleUppercase((prev) => !prev);
  };

  return [isTitleUppercase, toggle];
};

function Container() {
  let title = "Participants";
  const [isTitleUppercase, toggle] = useToggle();

  const generateExtraParams = () => {
    return {
      position: 1,
      selfConfidence: Infinity,
    };
  };

  const extraParams = useMemo(() => generateExtraParams(), []);
  const cars = useCarsContext();

  return (
    <>
      <header>
        <h1>{isTitleUppercase ? title.toUpperCase() : title}</h1>{" "}
        <button onClick={toggle}>Case toggle 🖲️</button>
      </header>
      <main>
        {cars.map((car, index) => (
          <CarCard key={index} car={car} extraParams={extraParams} />
        ))}
      </main>
    </>
  );
}

const CarCard = React.memo(function ({ car, extraParams }) {
  console.log(`🏎️ Ka-Chow! ⚡️⚡️⚡️`);

  return (
    <>
      <p>{car.name}</p>
      <div id="iw">
        <img src={car.image} width={100} />
      </div>

      {extraParams &&
        Object.entries(extraParams).map(([key, value]) => (
          <p key={Math.random()}>
            <i>{key}:</i> {value}
          </p>
        ))}
    </>
  );
});