Skip to content

Instantly share code, notes, and snippets.

@SaimumIslam
Created October 15, 2022 11:56
Show Gist options
  • Save SaimumIslam/88b423348eb5107aae0bd25ef2671f84 to your computer and use it in GitHub Desktop.
Save SaimumIslam/88b423348eb5107aae0bd25ef2671f84 to your computer and use it in GitHub Desktop.
callback problem function passing re render react
import React, { useState, useMemo } from "react";
function Number({ number, onClick }) {
console.log("number render");
return (
<div>
<p>Number:{number}</p>
<button onClick={onClick}>Numbering</button>
</div>
);
}
function Count({ count, onClick }) {
console.log("count render");
return (
<div>
<p>Count:{count}</p>
<button onClick={onClick}>Conting</button>
</div>
);
}
function Options({ options }) {
console.log("options render");
return <div>Options:{options}</div>;
}
function Home() {
const [count, setCount] = useState(0);
const [number, setNumber] = useState(0);
const options = useMemo(() => [1, 2, 3], []);
const handleCount = () => {
setCount((prev) => prev + 1);
};
const handleNumber = () => {
setNumber((prev) => prev + 1);
};
return (
<div>
<Count count={count} onClick={handleCount} />
<p>-----</p>
<Number number={number} onClick={handleNumber} />
<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