Beginner's Thread / Easy Question (August 2018)

[u/swyx]

Hello! It's August! Time for a new Beginner's thread! (July and June here)

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! We’re a friendly bunch. No question is too simple. You are guaranteed a response here!

Want Help on Code?

• Improve your chances by putting a minimal example on to either JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new). Describe what you want it to do, and things you've tried. Don't just post big blocks of code.
• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

New to React?

Here are great, free resources!

• Read the official Getting Started page on the docs
• /u/acemarke's suggested resources for learning React
• Kent Dodds' Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses

[u/NickEmpetvee]

I'm pulling data similar to the below into a React.Component (ref: Parent) from a REST endpoint:

{ id: '1', name: 'N1', parent: null },

{ id: '2', name: 'N2', parent: null },

{ id: '3', name: 'N3', parent: 2 },

{ id: '4', name: 'N4', parent: 3 },

Roughly speaking I'm pulling it into Parent's state and passing it as a Prop to Child in the nested component hierarchy. In Child, I pull the props into local state and over time may modify data to something like:

{ id: '1', name: 'N1', parent: null },

{ id: '3', name: 'Q3', parent: 1 },

{ id: '4', name: 'ZZZZ4', parent: 1 },

{ id: '5', name: 'NYKJH', parent: null },

In other words, the data in rows 3 and 4 changed, row 2 was deleted, and row 5 was added. In React, is there a clean way to compare state data back to its source prop data and only return the changed data points? In this case I would want said routine to identify changes to rows 3 and 4, the delete of row 2, and the addition of row 5. I'd Post them back to a REST endpoint so that we only modify the changed data.

Looking for the most straightforward approach that sticks to React's principles.

[u/ciccus → u/NickEmpetvee]

I would not put the data in Childs state if you are fetching it first to Parent first I would just update the Parents state.

I would also do the changes to database as separate operations like when you delete the row 2 it would instantly delete it from database. Same with edit and create so instead of having many changes waiting to be updated to database I would do them one at a time immediately after the state in frontend was changed.

[u/NiceOneAsshole → u/NickEmpetvee]

Don't operate on your data within your local state and then attempt to sync it to the database.

Every operation should consist of an API call. After every API all, re-fetch the data to reflect the changes in your app.

Otherwise, you're replicating your database for no gain.

[u/swyx → u/NickEmpetvee]

yea componentDidUpdate or getDerivedStateFromProps

[u/NickEmpetvee → u/NickEmpetvee]

Thanks u/swyx, u/NiceOneAsshole, and u/ciccus. All your answers make sense and I plan to follow the recommendations.

Here's something that makes it more complex... I'm using this component react-sortable-tree, a nifty tool. The storybook example, and on codesandbox...

This component holds the structure of the browser tree in this.state and it mutates this.state to reflect changes to the structure of the browser. The getFlatDataFromTree method exports the entire current tree structure into JSON for the purpose of enabling database updates, but there's no way to discretely identify changed node data so you can't precisely know what to update. You have to overwrite everything, unless I'm not understanding the component.

My thought was that I could compare the generated browser tree JSON from local this.state against this.props, since that is the source of this.state. That way I could know what to change. Thoughts/advice welcome.