Hooks were added to React in version 16.8.
Hooks Only allow function components to have access to state and other React features. Because Class Component No longer Needed
The Hook generally replace class components, there are no plans to remove classes from React.
Hook Rules
There Are three Rules -
- Hooks only can called inside the React function component
2.Hooks only can called Top of the component
3.Hooks can not be conditional
Example-
Here you must import Hook from React.
Here we are using the **useState **Hook to keep track of the application state.
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
I hope You Like the Article ♥
If you like the Article So follow me 😍
Thank you
Shivani Frontend Developer
Top comments (11)
Thank you 😊
thank you ☺
to the point! thanks.
Thank You 🙂
I'm a React developer. It's nice to be reminded of those hooks rules again here. Thank you.
Thank You 🙂
Nice Work!
Thank You 🙂
awesome post!
Thank You 🙂