what is a React Hooks?

#react #javascript #tutorial #beginners

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