Skip to content

Instantly share code, notes, and snippets.

@SaimumIslam
Last active October 15, 2022 08:09
Show Gist options
  • Save SaimumIslam/cc601d4b0653eca19a6bc2f28dea7b32 to your computer and use it in GitHub Desktop.
Save SaimumIslam/cc601d4b0653eca19a6bc2f28dea7b32 to your computer and use it in GitHub Desktop.
React re-render.
import React, { useState } from "react";
const Number = ({ number }) => {
console.log("number render");
return (
<div>
<p>Number:{number}</p>
</div>
);
};
const Count = ({ count }) => {
console.log("count render");
return (
<div>
<p>Count:{count}</p>
</div>
);
};
const Options = ({ options }) => {
console.log("options render");
return <div>Options:{options}</div>;
};
const Home = () => {
const [count, setCount] = useState(0);
const [number, setNumber] = useState(0);
const options = [1, 2, 3];
const handleCount = () => {
setCount((prev) => prev + 1);
};
const handleNumber = () => {
setNumber((prev) => prev + 1);
};
return (
<div>
<Count count={count} />
<button onClick={handleCount}>Numbering</button>
<p>-----</p>
<Number number={number} />
<button onClick={handleNumber}>Conting</button>
<p>-----</p>
<Options options={options} />
</div>
);
};
export default Home;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment