This content originally appeared on DEV Community and was authored by Stanley Enumah
REACT HOOKS:
Hi, Welcome to most simplified article on react hooks, if you’re interested in react, don’t skip!
React hooks are basically built-in functions that performance specific tasks, react have about 10(or more) hooks. Each having a specific way of declaration and usage. React hooks all have “use” prefix, example useState, useEffect.
Let’s dive in!
React hook rules;
- The most important, only call hooks at the top level of the function component
- Don’t declare hooks conditionally Basic React Hooks;
- useState
- useEffect
- useRef Other React Hooks;
- useReducer
- useMemo
- useContext
- useDebugValue These are not the only hooks, at a beginner/intermediate level, the basic ones are mostly used. Let’s discuss the most used react hook, useState This is as the name is, it’s used to stored and mutable the state of a react component, it can do things like controlling when to show a p tag, controlling input fields, changing an array. Infact, anything that is to change in the UI is mostly controlled using useState. useState can take in string, number boolean, array and a call back function, leaving the initial state empty will result to undefined An example; In this example we want to display the message “Good afternoon” when we click the button “greet”, here’s the syntax;
` function App() {
/declaring the state/
const [show, setShow] = useState(false);
/function to change the state/
function handleShow() {
setShow(true);
}
return (
{show ?
Good afternoon
: ""}greet
);
}`
Explanation: on clicking the greet button, the show state changes from false to true and the p tag shows if not it won’t this is because its handled by the show state.
In the next article, we will consider more examples of the use of useState, salam guys!
Don’t forget to drop a comment.
This content originally appeared on DEV Community and was authored by Stanley Enumah
Stanley Enumah | Sciencx (2025-01-28T20:35:40+00:00) REACT HOOKS: USESTATE (01). Retrieved from https://www.scien.cx/2025/01/28/react-hooks-usestate-01/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.