Learn how to create custom hooks using the created counting function.
I am currently learning React and learned how to use the useState in components.
Next, I would like to create a custom hook for the process I created, but I didn't know how to make it even after I looked it up on the web, so I would like to ask you what happens if I use my code.
How do I separate the logic of the following code countdown function and alert display function?
import {Link} from "react-router-dom";
import {useState} from "react";
export const CountPage=()=>{
const [count, setCount] = useState(0);
const [alert, setAlert] = useState(false);
const increment=()=>{
setCount(count+1);
setAlert(false);
};
const decrement=()=>{
if(0<count){
setCount (count-1);
} else{
setAlert(true);
}
};
return(
<>
<div className="text-center">
<h2>Count Screen</h2>
<p>Current value: {count}</p>
</div>
<div className="m-4text-center">
<button
className="m-4bg-blue-400 hover:bg-blue-500 text-white font-bold py-2px-4 rounded"
onClick = {increment}
>
+
</button>
<button
className="m-4bg-red-400 hover:bg-red-500 text-white font-bold py-2px-4 rounded"
onClick = {decrement}
>
-
</button>
</div>
{alert?(
<pclassName="bg-red-100 border border-red-400 text-red-700 m-4px-4py-3 round relative">
The value cannot be less than or equal to 0.
</p>
) : (
""
)}
</>
);
};
Updating the alert state in increment() and decrement() may be causing complexity.
alert state can be calculated from count state, so why don't you use count instead of state?
constisNegative=count<0;
As for what to keep as state, the following article is very easy to understand, so I recommend it.
https://beta.reactjs.org/learn/you-might-not-need-an-effect
This eliminates the complexity and simplifies the extraction to the custom hook.
It seems that the following can be extracted.
Please refer to the article below for instructions on how to create a custom hook.
https://ja.reactjs.org/docs/hooks-custom.html
const [count, setCount] = useState(0);
const increment=()=>{
setCount(prevCount)=>prevCount+1);
};
const decrement=()=>{
setCount(prevCount)=>prevCount-1);
};
One more thing I would like to point out as a supplement: setCount(count+1) should be as follows.
browsing:
https://zenn.dev/stin/articles/use-approperate-api
setCount(prevCount)=>prevCount+1);
For your information, I will also attach the Sandbox link that I tried.
https://codesandbox.io/s/youthful-shape-5nfsb2?file=/src/useCounter.jsx:143-182
Good luck with your studies!
© 2024 OneMinuteCode. All rights reserved.