React useEffect on function props

Question

Just started using React function hooks. I was looking into a case where you have a parent function which passes an array and a child function which relies on the array contents.

App.js (parent) ->

import React, {useEffect} from 'react';
import ChartWrapper from './StaticChart/ChartWrapper';
import './App.css';

function App() {
  let data = [];

  function newVal() {
    let obj = null;
    let val = Math.floor(Math.random() * 10);
    let timeNow = Date.now();
    obj = {'time': timeNow, 'value': val};
    data.push(obj);
   // console.log(obj);
  }

  useEffect(
    () => {
      setInterval(() => {newVal();}, 500);
    }, []
  );

  return (
    <div className="App">
      <ChartWrapper data={data} />
    </div>
  );
}

export default App;

ChartWrapper.js (child) ->

import React, {useRef, useEffect} from 'react';
export default function ChartWrapper(props) {

    const svgRef = useRef();
    const navRef = useRef();

    useEffect(
        () => {
            console.log('function called');
        }, [props.data]        
    );

    return (
        <div>
            <svg ref = {svgRef} width = {700} height = {400}></svg>
            <svg ref = {navRef} width = {700} height = {75}></svg>
        </div>
    );
}

So every time App.js adds a new object in the array, ChartWrapper gets called. Currently, in the ChartWrapper function, I have useEffect which should listen to changes in props.data array and get executed, but it is not working. The only time the function gets called is initially when the component renders.

What am I doing wrong?

Javascript passes arrays by reference. Even when you push a new value onto it, it's still the same array. useEffect doesn't do deep comparison (i.e. it doesn't compare the contents of the array). — Cully
– Cully, Commented May 21, 2020 at 7:05
If instead of passing props.data to your useEffect dependency array, try passing [JSON.stringify(props.data)] and see if it works the way you want. Btw, that probably isn't a great solution, just a way of illustrating what's going on. — Cully
– Cully, Commented May 21, 2020 at 7:07
Can you try to copy the array into a new array, rather than mutate it? i.e. replace data.push(obj) with data = [...data, obj] — Christian Fosli
– Christian Fosli, Commented May 21, 2020 at 7:09
@ChristianFosli That could potentially cause useEffect to re-run on every render, since the array will always be different. — Cully
– Cully, Commented May 21, 2020 at 7:10
We're only changing data every 500ms, right? I presume we want useEffect to run every time data changes. — Christian Fosli
– Christian Fosli, Commented May 21, 2020 at 7:13

Cully · Accepted Answer · 2020-05-21 08:06:01Z

Ok, I ran your code and figured out what the problem is. data is changing, but it isn't triggering a re-render of ChartWrapper. So your useEffect in ChartWrapper is only run once (on the initial render). In order to trigger a re-render, you'll need to create and update data using useState:

let [data, setData] = useState([])

function newVal() {
    let obj = null;
    let val = Math.floor(Math.random() * 10);
    let timeNow = Date.now();
    obj = {'time': timeNow, 'value': val};
    const newData = [...data]
    newData.push(obj)
    setData(newData)
}

However, that isn't quite enough. Since your setInterval function is defined once, the value of data in its call context will always be the initial value of data (i.e. and empty array). You can see this by doing console.log(data) in your newVal function. To fix this, you could add data as a dependency to that useEffect as well:

useEffect(() => {
  setInterval(newVal, 1000);
}, [data]);

But then you'll create a new setInterval every time data changes; you'll end up with many of them running at once. You could clean up the setInterval by returning a function from useEffect that will clearInterval it:

useEffect(() => {
  const interval = setInterval(newVal, 1000);

  return () => clearInterval(interval)
}, [data]);

But at that point, you might as well use setTimeout instead:

useEffect(() => {
  const timeout = setTimeout(newVal, 1000);
  return () => clearTimeout(timeout)
}, [data]);

This will cause a new setTimeout to be created every time data is changed, so it will run just like your setInterval.

Anyway, your code would look something like this:

const ChartWrapper = (props) => {
    useEffect(
        () => {
            console.log('function called');
        }, [props.data]        
    );

    return <p>asdf</p>
}

const App = () => {
  let [data, setData] = useState([])

  function newVal() {
    let obj = null;
    let val = Math.floor(Math.random() * 10);
    let timeNow = Date.now();
    obj = {'time': timeNow, 'value': val};
    const newData = [...data]
    newData.push(obj)
    setData(newData)
  }

  useEffect(() => {
    const timeout = setTimeout(newVal, 1000);
    return () => clearTimeout(timeout)
  }, [data]);

  return (
     <ChartWrapper data={data} />
  )
}

And a running example: https://jsfiddle.net/kjypx0m7/3/

Something to note is that this runs fine with the ChartWrapper's useEffect dependency just being [props.data]. This is because when setData is called, it is always passed a new array. So props.data is actually different when ChartWrapper re-renders.

resolritter · Accepted Answer · 2020-05-21 10:16:52Z

Objects in hooks' dependencies are compared by reference. Since arrays are objects as well, when you say data.push the reference to the array does not change and, therefore, the hook is not triggered.

Primitive values, on the other hand, are compared by value. Since data.length is a primitive type (number), for your purpose, putting the dependency on data.length instead would do the trick.

However, if you were not modifying the array's length, only the values inside of it, the easiest way to trigger a reference difference (as explained in the first paragraph) would be to wrap up this array in a setState hook.

Here's a working example: https://codesandbox.io/s/xenodochial-murdock-qlto0. Changing the dependency in the Child component from [data.length] to [data] has no difference.

Collectives™ on Stack Overflow

React useEffect on function props

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related