React Hooks - setting object not re-rendering the component's data

Question

I am using React useState to declare my object:

    const [results, setResults] = useState();
  console.log(results);

In same file I am returning React component and I am passing it some props:

 <Table
          data={results ? results.Companies : []}
          setData={(newArr) => {
            let newResults = results;
            newResults.Companies = newArr.slice(0);
            console.log(newResults);
            return setResults(newResults);
          }}
        />

P.S.: Keep in mind that I am passing to data only results.Companies which is array.

In this Table component I am changing the results.Companies property:

props.setData(arr);

So when it triggers function in Table component:

setData={(newArr) => {
                let newResults = results; // I am assigning to newResults current result state
                newResults.Companies = newArr.slice(0); // I am replacing newResults.Companies with new array I want to pass
                console.log(newResults); // HERE is the desired results output
                return setResults(newResults);
              }}

The newResults variable is exactly the result I want to be passed to setResutlts. But this setting does not trigger re-rendering and this console.log(results) for example is not called. Why it is not trigger after I am passing new value to setResults()

@RedBaron It's kind of complicated items and code. I am fetching initial results from API where I am using token and so on... — Borislav Stefanov
– Borislav Stefanov, Commented Jun 19, 2020 at 8:55
but if you make a simplified version with mocked data then it should work — Red Baron
– Red Baron, Commented Jun 19, 2020 at 8:57

Dennis Vash · Accepted Answer · 2020-06-19 09:02:35Z

3

As setData is a callback used by Table.

You have closures on results and you mutate state which is an anti-pattern.

Never mutate this.state directly, as calling setState() afterward may replace the mutation you made. Treat this.state as if it were immutable.

Due closures you keep calling setData with the last value of results upon its initialization, and by mutating the state you actually don't update state as by how setState works.

After understanding what closures are, you should refactor the code to use functional updates:

const setData = (newArr) => {
  setResults((prev) => {
    let newResults = {...prev, Companies: newArr.slice(0)};
    return newResults;
  });
}
<Table setData={setData}/>

edited Jun 19, 2020 at 9:02

answered Jun 19, 2020 at 8:57

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

Collectives™ on Stack Overflow

React Hooks - setting object not re-rendering the component's data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related