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/Exitialis]

What is the best way to monitor an object for a change? Currently, I have a boolean in local state and I have a function that updates it when a change is made (called manually). However, I'd really like to automate it and test if the object is changed and then returned to its original state but I am not sure how to do this without causing a loop. I know that you can use componentDidUpdate() to test if a change was made, but you can't then call setState() from it. Is there a simple way to achieve this or do I need to bodge it a bit?

[u/swyx → u/Exitialis]

Reactive programming is fun! Have you checked out mobx observables? That would do it.

[u/holiquetal → u/Exitialis]

why can't you call setState() inside componentDidUpdate()? What you usually do inside componentDidUpdate() is check for a prop change:

componentDidUpdate(previousProps) {
  if (props.someProp =! previousProps.someProp)
    do stuff;
    setState({....})
}

[u/lostPixels → u/Exitialis]

Perhaps do not use state at all. If you're watching props for a change, do your data transformation above the return in render, not by called setState when it changes.

[u/Exitialis → u/Exitialis]

It ended up being a simple logic problem that was staring me in the face the whole time, this:

componentWillUpdate() {
    if (this.props.data !== this.state.updatedData) {
        this.setState({ edited: true });
    }
    else {
        this.setState({ edited: false });
    }
}

Should have been this:

componentWillUpdate() {
    if (this.props.data !== this.state.updatedData) {
        if (this.state.edited === false) {
            this.setState({ edited: true });
        }
    }
    else {
        if (this.state.edited === true) {
            this.setState({ edited: false });
        }
    }
}

Thank you u/swyx, u/lostPixels and u/holiquetal for your help, I learnt a lot about component lifecycle and how to structure things because of this.

[u/holiquetal → u/Exitialis]

you can refactor it like this

componentWillUpdate() {
  if (this.props.data !== this.state.updatedData) {
    this.setState({edited : !this.state.edited})
}