This content originally appeared on DEV Community and was authored by suraj more
Hooks are a new feature introduced in React 16.8 and available in later versions. We can use state and other features of react by using hooks. React has two ways of creating component, one is using class and other is using function.
using class to generate component needs to add react boiler-plate code because of that using function for generating component is introduced. to use state like features of react in later way hooks are useful.
There is certain hooks that react provide us. useState, useEffect, useRef and useReducer. but we can create custom hooks as per our requirements.
useState:
as name suggests it used to handle state of component. It helps to manage state between component re-renders.
lets look at example below,
we have one button "Click Me", on clicking that button text should be changed to "title changed"
export default function App() {
let title = "Initial header";
const handleClick = () => {
title = "title changed";
console.log(title);
}
return (
<div className="App">
<h1>{title}</h1>
<button onClick={handleClick}>Click Me</button>
</div>
);
}
as we can see, when button is clicked the title value is changed in console, but on browser it shows old value, to update value component needs to re-render and between that rendering process we also need to maintain updated state. This thing can be achieved using useState
import { useState } from "react";
export default function App() {
const [title, setTitle] = useState("Initial header");
const handleClick = () => {
setTitle("title changed");
};
return (
<div className="App">
<h1>{title}</h1>
<button onClick={handleClick}>Click Me</button>
</div>
);
}
useEffect:
useEffect hook is used to handle activities when component renders . There is some syntax variation is used to customize useEffect.
//executes at component's initial render
useEffect(()=> {
}, []);
//executes at component's state title is changed.
useEffect(()=> {
}, title);
//executes at component's renders
useEffect(()=> {
});
This content originally appeared on DEV Community and was authored by suraj more
suraj more | Sciencx (2021-09-04T09:31:25+00:00) Hooks in React. Retrieved from https://www.scien.cx/2021/09/04/hooks-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.