# Diving into more React Hooks

### What are Side-Effects?

Before we get into the hooks we need to recall what are **Side-Effects.** Suppose you have a pure function that takes two integers as an argument and returns the sum of those two numbers and the function also has console.log well. Now this console.log has nothing to do with the sum function, therefore, console.log is a side-effect.

## What is useEffect React Hook?

The useEffect hook is a built-in hook in React that allows you to run side effects in functional components. Side effects are operations that affect something outside of the component, such as fetching data, updating the DOM, or subscribing to a data source. The useEffect hook is similar to lifecycle methods in class components, but it's more concise and flexible.

**Syntax of useEffect Hook is shown below:**

```javascript
useEffect(callback, dependencies)
```

* `callback`: A function that contains the side effect logic.
    
* `dependencies`: An optional array of dependencies that the effect depends on. If any of the dependencies change, the effect will be re-run. If you pass an empty array `[]`, the effect will only run once, similar to `componentDidMount` in class components.
    

### Understanding Dependencies

Dependencies are an important concept in useEffect, as they determine when the effect should be re-run. If any of the dependencies listed in the array change, the effect will be re-run. If no dependencies are provided, the effect will run on every render, which may not be desirable in some cases.

### Six Usages of useEffect

1. This runs after every render:
    
    ```javascript
    useEffect(() =>{
        //Side-effect
        }
    );
    ```
    
2. This runs once after mounting the initial render:
    
    ```javascript
    useEffect(() =>{
        //Side-effect
        }
    []);
    ```
    
3. This runs only after the state changes:
    
    ```javascript
    useEffect(() =>{
        //Side-effect
        }
    [state]);
    ```
    
4. This runs only after props changes:
    
    ```javascript
    useEffect(() =>{
        //Side-effect
        }
    [props]);
    ```
    
5. This runs after both state and props changes:
    
    ```javascript
    useEffect(() =>{
        //Side-effect
        }
    [state,props]);
    ```
    
6. This runs for clean-up :
    
    Clean-up: You can use useEffect to clean up resources, such as closing a WebSocket or canceling a network request. The syntax is shown below:
    
    ```javascript
    useEffect(() =>{
        //Side-effect
        return () =>{
        // Side-effect cleanup
    };
        }
    [state,props]);
    ```
    

### What is useRef hook?

We will start useRef hook with its syntax:

```javascript
const ref = useRef(initialValue)
```

* **useRef :** A build-in React hook helps to persist value between re-renders but doesn't re-render the component by any chance. This means that if your component returns some values, it will save that value for its entire lifetime no matter how many times it renders. Secondly, it means that if we update the value that **useRef** returns then the component is not re-rendered but if by chance the component is re-rendered by any chance, the reference value is persisted despite the re-render.
    
* initialValue: useRef accepts an optional argument. It can be a valid JavaScript value which to set the initial value of the reference.
    

ref: useRef returns a reference which is a plain JavaScript object with a special property called **current.**

### useRef Key Points

* useRef returns an object with a special property called **current**
    
* Updating the reference value does not cause a re-render of the component
    
* The reference value is persisted between renders.
    

### useState vs useRef

In React, `useState` and `useRef` are both hooks that allow you to manage state in functional components. However, they serve different purposes and have some key differences:

1. **State management:** `useState` is used for managing state that triggers re-renders in your component. It returns a tuple with the current state value and a function to update that state. When the state value changes, the component re-renders to reflect the updated state.
    
    Example usage of `useState`:
    
    ```javascript
    import React, { useState } from 'react';
    
    const Counter = () => {
      const [count, setCount] = useState(0);
    
      const increment = () => {
        setCount(count + 1);
      };
    
      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={increment}>Increment</button>
        </div>
      );
    };
    ```
    
2. **Direct DOM manipulation:** `useRef` is used for accessing and manipulating DOM elements directly without triggering re-renders. It returns a mutable ref object that can be used to store and access the current value of a DOM element, and it does not trigger component re-renders when the ref value changes.
    
    Example usage of `useRef`:
    
    ```javascript
    import React, { useRef, useEffect } from 'react';
    
    const InputFocus = () => {
      const inputRef = useRef();
    
      useEffect(() => {
        inputRef.current.focus();
      }, []);
    
      return (
        <div>
          <input ref={inputRef} type="text" />
          <button onClick={() => inputRef.current.focus()}>Focus input</button>
        </div>
      );
    };
    ```
    
3. **Updating state:** `useState` is used when you need to update state and trigger re-renders in your component. On the other hand, `useRef` is used when you need to store a mutable value, such as a reference to a DOM element, and you don't want to trigger re-renders.
    
4. **Initial value:** `useState` requires an initial value to be provided when declaring the state, whereas `useRef` does not. The initial value for `useState` can be a primitive value, an object, or an array, while `useRef` can be initialized with `null` or an initial value.
    
5. **Updates triggering re-renders:** When using `useState`, updating the state with the state updater function returned by `useState` triggers a re-render of the component, as React needs to update the UI to reflect the new state. However, updating the value of a ref object created with `useRef` does not trigger a re-render, as it is considered a mutable value that does not affect the component's UI.
    

In summary, `useState` is used for managing state that triggers re-renders in your component, while `useRef` is used for accessing and manipulating DOM elements directly without triggering re-renders. Both hooks have their specific use cases and should be chosen based on your component's requirements.

---

Thank you for taking the time to read our blog! I hope you found the information helpful and informative. Your support means a lot to me.

As I strive to continuously improve and provide valuable content, I would greatly appreciate your feedback. If you have any comments, suggestions, or questions, please feel free to share them with me. Your feedback will help me understand your needs better and shape my future content accordingly.

Once again, thank you for being a part of my blogs. I look forward to serving you with more insightful articles in the future. Please stay tuned for more engaging content!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682248201828/32d15c21-9c7b-400c-aba6-18e5eb99c06e.png align="center")