# React Hooks ( useState & useEffect )

Hooks are functions that let developers "hook into" React state and lifecycle features from function components.These Hook features were introduced in React version 16.8.

### React Hooks Rules

👉 Hooks should be called inside a React function

* Don’t call Hooks from regular JavaScript functions.
    

👉 Hooks can only be called at the top level of a component

* Don’t call Hooks inside loops, conditions, nested functions, or `try`/`catch`/`finally` blocks
    

### How to use the useState Hook

To use the `useState` Hook in your project you must first import it into your project.

`import { useState } from 'react';`

Then following the rules mentioned above, call `useState` at the top level of your component to declare a state variable.

`const [state, setState] = useState(intialState);`

`state` -> The first variable is known as the value of the state.

`setState` -> The second variable is a function used to update the state.

`intialState` -> The value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions.

Example :-

```javascript
import React, { useState } from 'react';

function App() { 

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

return ( 
	<div>
    	<p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}> Click me
        </button>
    </div>
    ); 
}
```

According to the above example `count` and `setCount` are the two variables of the state Hook, where `count` is the current value of the state and `setCount` is used to update the value of the state. Also, the initial value of the state is set to `0`. Therefore, whenever the button is clicked, `setCount` will update the value of the count.

### How to use the useEffect Hook

The `useEffect` hook in React is a useful tool for functional components. It helps manage tasks that aren't directly related to displaying content, like fetching data from the internet, retrieving data from API endpoints, or setting up timers. It can also be used to update components after they've been rendered, making your app more dynamic.

To use the `useState` Hook in your project you must first import it into your project.

`import { useEffect } from 'react';`

`useEffect` accepts two arguments. The second argument is optional. Also the function that we pass as the first argument could be an arrow function.

`useEffect(<function>, <dependency>)`

* If there are <mark>no dependencies passed</mark> to the hook, it will **Run on every render.**
    

* If we pass <mark>an empty array</mark> as the dependency, it will **Run only on the first render.**
    

* If we pass <mark>props or state values</mark> as the dependencies, it will **Run on the first render** and also **Any time any dependency value changes.**
    

Example :-

```javascript
import { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const [calculation, setCalculation] = useState(0);

  useEffect(() => {
    setCalculation(() => count * 2);
  }, [count]); // <- add the count variable here

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
      <p>Calculation: {calculation}</p>
    </>
  );
}
```

In the code example above, we already know how the `useState` Hook works by now! As for the process of the `useEffect` in the above code, it will run on the first render and also every time the value of `count` changes.

Thank you for taking the time to read this article. I hope you found the information useful and that it helped you understand how the `useState` & `useEffect` hook works in React.

I will look forward to sharing more insights with you in future articles. Happy Coding 😊!!!

---

## References

[https://www.freecodecamp.org/news/how-to-use-the-usestate-and-useeffect-hooks-in-your-project/](https://www.freecodecamp.org/news/how-to-use-the-usestate-and-useeffect-hooks-in-your-project/)

[https://www.w3schools.com/react/react\_useeffect.asp](https://www.w3schools.com/react/react_useeffect.asp)

[https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state](https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state)