Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import { useCallback, useEffect, useState } from "react";
import React from "react";
import ReactDOM from "react-dom";
const Counter = () => {
const [incrementClicked, setIncrementClicked] = useState(false);
const [decrementClicked, setDecrementClicked] = useState(false);
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
const decrement = useCallback(() => {
setCount(count - 1);
}, [count]);
useEffect(() => {
console.log(`The current count is ${count} and is an ${count % 2 ? 'odd' : 'even'}.`);
console.log(`The status of increment button ${incrementClicked}.`);
console.log(`The status of decrement button ${decrementClicked}.`);
return () => {
console.log('------Im in destory process--------')
console.log(`The current count is ${count} and is an ${count % 2 ? 'odd' : 'even'}.`);
console.log(`The status of increment button ${incrementClicked}.`);
console.log(`The status of decrement button ${decrementClicked}.`);
console.log('------Thank You--------')
}
})
return (
<>
<p>Count: {count}</p>
<button onClick={
() => {
increment();
setIncrementClicked(true);
setDecrementClicked(false);
}
}>Increment Count</button>
<button onClick={
() => {
decrement();
setIncrementClicked(false);
setDecrementClicked(true);
}
}>Decrement Count</button>
<button onClick={
() => {
setIncrementClicked(false);
setDecrementClicked(false);
}
}>Reset button status</button>
</>
);
}
const App = ({ message }: {
message: string,
}) => {
const [visible, setVisible] = useState(true);
return (
<>
<h3>{message}</h3>
{visible && <Counter />}
<button onClick={
() => {
setVisible(!visible)
}
}>{`${visible ? 'Hide Counter' : 'Show Counter'}`}</button>
</>
);
}
ReactDOM.render(<App message={"Hello, esbuild"} />, document.getElementById("root"))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment