UseEffect with and without condition

In our previous blog we have learned to use hooks in react js and to display the data in React.js. Now its time to move shade and learn to use useEffect with condition and without condition. So, lets get started.

useEffect without condition

useEffect is another hook in react. This hook allows us to perform side effects in our components. Some examples of useEffect are: fetching data, directly updating the DOM and timers.

useEffect accepts two arguments (function and dependency) and the second argument is optional.

useEffect(<function>,<dependency>)

Let see with example

import React, { useState, useEffect } from 'react';

function Example() {

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

  useEffect(() => {

    document.title = `You clicked ${count} times`;

  });

  return (

    <div>

      <p>You clicked {count} times</p>

      <button onClick={() => setCount(count + 1)}>

        Click me

      </button>

    </div>

  );

}

export default Example;

First, we declare the count state variable and then we use an effect. We pass a function to the useEffect hook.The function we pass is our effect. Inside the effect,we set the document title using the document.title browser API.When component is rendered, it remembers the effect we used and then runs the effect after updating the DOM. This happens for every render and also it includes the first one.

useEffect with condition

First, import useEffect.

We will take two setState, count and data. 

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

  const [data, setData] = useState(20);

Now, we will use useEffect, it accepts two arguments, function and dependency and the second one is optional. Take a onClick function and update the count and data on clicking.

If we need to update only count then in useEffect will pass the data “count” as parameter.

  useEffect(() => {

    console.warn("use effect with count")

  },[count])

If we won’t pass any parameters then useEffect will update all the functions.

Here, we have a full code.

import './App.css';

import React, { useEffect, useState } from 'react'

function App() {

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

  const [data, setData] = useState(20);

  useEffect(() => {

    console.warn("use effect with count")

  },[count])

  useEffect(() => {

    console.warn("use effect with data")

  },[data])

  return (

    <div className="App">

      <h1>count: {count}</h1>

      <h1>data: {data}</h1>

      <button onClick={() => setCount(count + 1)}>Update Count</button>

      <button onClick={() => setData(data + 1)}>Update data</button>

    </div>

  );

}

export default App;

Output: 

Click on the Update Counter button. On every click of the button, we are updating useEffect.

Click on the Update Data button. On every click of the button, we are updating useEffect.