avoid useEffect to render at first load?

Question

I know useEffect is the 'combination' of componentDidUpdate and componentDidMount? but since I have already passed in a dependency, why is it still load during the first load?

import React, { useState, useEffect } from "react";
import { Button, Table, Column } from "antd";

const initData = [
  {
    id: 1,
    name: "James"
  },
  {
    id: 2,
    name: "John"
  }
];

function MyTable({ changeDataFlag }) {
  const [data, setData] = useState(initData);

  useEffect(() => {
    setData(
      data.map(o => ({
        id: "Titus",
        name: "Paul"
      }))
    );
  }, [changeDataFlag]);

  return (
    <Table dataSource={data} rowKey={data => data.id}>
      <Column title="Id" dataIndex="id" />
      <Column title="Name" dataIndex="name" />
    </Table>
  );
}

export default MyTable;

I expect to see James and John on the table before I click update button

https://codesandbox.io/s/hello-antd-t29cs

ravibagul91 · Accepted Answer · 2019-08-17 02:15:40Z

3

By default useEffect run first time and then on change of dependencies.

You can do this,

useEffect(() => {
    if(changeDataFlag){
      setData(
        data.map(o => ({
          id: "Titus",
          name: "Paul"
        }))
      );
    }
}, [changeDataFlag]);

answered Aug 17, 2019 at 2:15

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hanz Over a year ago

this make sense

Sandrin Joy Over a year ago

but changeDataFlag has to initialise anyways so it triggers this useEFfect ryt ?

charliemei · Accepted Answer · 2019-08-17 02:35:15Z

0

In my opinion,I think you should put the change data logic into onclick event. In general,when you click button you will fetch data from server and change data.

import React, { useState, useEffect } from "react";
import { Button, Table, Column } from "antd";

function MyTable({ data }) {
  return (
    <Table dataSource={data} rowKey={data => data.id}>
     <Column title="Id" dataIndex="id" />
     <Column title="Name" dataIndex="name" />
    </Table>
  );
}

export default MyTable;

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import "antd/dist/antd.css";
import MyTable from "./MyTable";
import { Button } from "antd";
const initData = [
  {
    id: 1,
    name: "James"
  },
  {
    id: 2,
    name: "John"
  }
];

const App = () => {
  const [changeDataFlag, setChangeDataFlag] = useState(false);
  const [data, setData] = useState(initData);
  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setData(
            data.map(o => ({
              id: "Titus",
              name: "Paul"
            }))
          );
        }}
      >
        change data source
      </Button>
      <MyTable data={data} />
    </div>
  );
};

render(<App />, document.getElementById("root"));

answered Aug 17, 2019 at 2:35

charliemei

112 bronze badges

1 Comment

Hanz Over a year ago

changeDataFlag is from other component, there's a reason for that

Mostafizur Rahman · Accepted Answer · 2023-01-10 21:06:41Z

0

To avoid execution of your dependency useEffect at first page render then you have to use - useEffect with useRef . It only runs on next changes

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

function MyComponent() {
  const [data, setData] = useState('some data');
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    console.log("This will not be called on first render");
  }, [data]);

  return <div>My Component</div>;
}

edited Jan 10, 2023 at 21:06

answered Jan 10, 2023 at 21:01

Mostafizur Rahman

1963 silver badges6 bronze badges

Comments

Black Hole · Accepted Answer · 2019-08-17 02:52:44Z

-2

a useEffect without target only enter one time, maybe helps, after you can make a useEffect only for updates

useEffect(() => {
    setData(
      data.map(o => ({
        id: "Titus",
        name: "Paul"
      }))
    );
  }, []);

answered Aug 17, 2019 at 2:52

Black Hole

1,41416 silver badges17 bronze badges

2 Comments

Hanz Over a year ago

empty depencies make useEffect run like componentDidMount

noob7 Over a year ago

hes asking the converse of what you have said

Collectives™ on Stack Overflow

avoid useEffect to render at first load?

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related