React useState() and UseEffect() Hook.

Today We are learning how to use react hooks in react Application, It is very easy to operate. we will see how to create your own custom hooks.

At the very first step, you need to create react app.

create-react-app is where we begin to make sure you have node, npm, and create-react-app installed as usual.

here is the link, to install node JS.

Create a new react app using

create-react-app react-calculator
cd react-calculator
npm start

Now, You see the default react application

What is useState and why do we use it?

Your application's status will undoubtedly change at some time. This might be any form of data that is present in your components, such as the value of a variable or object.

To handle these changes and reflect them to DOM we have to use useState.

import  { useState } from 'react';

You must import the useState hook from React in order to use this hook. We employ a functional element known as an app.

for example:

import { useState } from "react";

function App() {
  const [word, setWord] = useState("Hello");
  const changeWord = () => {
    setName("Welcome");
  };

  return (
    <div>
      <p>{word}</p>
      <button onClick={changeWord}> Click me </button>
    </div>
  );
}

export default App;

You must import the useState hook from React in order to use this hook. We are utilizing a tool called an app.

Here, we have created a state and passed the initial value to it. The state variable is called a word where we pass the initial value as 'Hello' and setWord is the function that is updating that value.

Now In the example above, we used the destructuring assignment to give the state in useState an initial name value ("Welcome").

return (
    <div>
      <p>{word}</p>
      <button onClick={changeWord}> Click me </button>
    </div>
  );
}

Next, the DOM paragraph containing the function changeWord() function calls setWord function and which changes the value of that variable and the value passed to the setWord() function.

you have to create a function before the return statement. That's it about useState now we move towards the second hook useEffect hook.

what is useEffect() and why do we use it?

The Effect Hook executes an effect each time a state changes, as the name suggests. As soon as the state is changed and after the initial render, it automatically starts running.

In the below example will see the counter increment effect after clicking on the increment button. The useEffect hook runs every time the count variable changes and records some information in the console.

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Button Clicks ${count} times`)
  });

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

In the first line, we import react useEffect() hook as we also use useState so. We imported the two hooks.

import { useState, useEffect } from "react";

You can use useEffect() while fetching data from External APIs, also the changing DOM, and so on there you can use useEffect().

If you have multiple states and wanted to run useEffect() multiple times so you can pass the dependency array as the second argument in the useEffect hook.

Now will see if we wanted to run useEffect ones so we pass an empty array string

for Example:

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Button Clicks ${count} times`)
  },[]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

The above code is the same we just added a simple empty string [] after the function completes. If you leave the array empty, the effect will only run once, regardless of changes in the attached state.

Thank you for reading.