DEV Community

Shivani tiwari
Shivani tiwari

Posted on

what is a React Hooks?

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 -

  1. 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 />);
Enter fullscreen mode Exit fullscreen mode

I hope You Like the Article ♥
If you like the Article So follow me 😍

Thank you
Shivani Frontend Developer

Top comments (11)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
shiwani295 profile image
Shivani tiwari

Thank you 😊

Collapse
 
shiwani295 profile image
Shivani tiwari

thank you ☺

Collapse
 
tikul1 profile image
Hardik Parmar

to the point! thanks.

Collapse
 
shiwani295 profile image
Shivani tiwari

Thank You 🙂

Collapse
 
clay profile image
Clay Ferguson

I'm a React developer. It's nice to be reminded of those hooks rules again here. Thank you.

Collapse
 
shiwani295 profile image
Shivani tiwari

Thank You 🙂

Collapse
 
acode123 profile image
acode123

Nice Work!

Collapse
 
shiwani295 profile image
Shivani tiwari

Thank You 🙂

Collapse
 
devkramo profile image
Dev Kramo

awesome post!

Collapse
 
shiwani295 profile image
Shivani tiwari

Thank You 🙂