New features of hooks in React v18
1. Hooks allow us to use State inside functional Component:
We all are aware of React State. It has a very big advantage over any variable because if the variable got changed then the component will not re-render but if somehow the state got changed then the whole component will re-render.
Before React v16.8 we can only use state with class component because there “state” is a built-in object. But after this version of react, a functional component can also use state via the “useState” hook.
Syntax:
let [current state, function] = useState(Initial value of that state);
Example: In the below example we have created a state “work” whose initial value was “learning” and on button click we have changed that value. Since it is state and its value got changed that’s why it re-rendered the whole component and we can see the updated value.
Javascript
// Filename - App.jsimport "./App.css";import { useState } from "react";function App() { let [work, setWork] = useState("Learning"); function updateWork() { setWork("Learning from GFG"); } return ( <div className="App"> <header className="App-header"> <h1 className="gfg">w3wiki</h1> <h3 className="gfghook"> State in Functional Component </h3> <h3>{work}</h3> <button onClick={updateWork}>Click Here</button> </header> </div> );}export default App; |
Steps to Run the Application: Run your application using the following command:
npm start
Output:
Explain the new feature of React hooks introduced in React v16.8
React v16.8 is no less than a miracle for all the React developers because this version of React introduced hooks to all of us. Before its release, the developer community was tired of using class components but they still had to use them because the functional component does not provide many features that the class component provides. But after hooks, we can use those features in the functional component that was only accessible with the class component. So we can say after this version i.e. React v16.8, the popularity of the class component was reduced.
Contact Us