The thing I’m happiest about front-end development is that there’s always something new to learn. But we can spend our lives mastering programming languages, libraries, and frameworks and still know nothing about them.

Because we’re all learning, it also means we’re all prone to making mistakes. It doesn’t matter. Our goal is to get better. If you make a mistake and learn from it, you’re doing well! But if you don’t learn anything new and keep making the same mistakes over and over again, EMMM… Your career could stall.

In that spirit, here are three common mistakes I saw from my CodeReview junior development classmates. Let’s check it and discuss how to correct it.

Modify state directly

When updating the React component state, the most important thing is to call the setState method to update it and pass in a new copy of the object, rather than directly modifying the previous state. If you change a component’s state incorrectly, the React Diff algorithm won’t catch the change, and your component won’t update properly. Let’s look at an example.

Suppose you have a state like this:

this.state = {
    colors: ['red'.'green'.'blue']
}
Copy the code

Now you want to color this array:

// Method 1:
this.state.colors.push('yellow’)
// Method 2:this.state.colors = [...this.state.colors, 'Yellow ']Copy the code

Both approaches are wrong! When updating state in a class component, the setState method must be used, and care should be taken not to change the original object. Here is the correct way to add elements to an array:

this.setState(prevState= > ({ colors: [...prevState.colors, 'yellow']}))Copy the code

Forgot to batch update setState

SetState can be used in two ways. The first method is to pass in an object as a parameter. The second method is to pass in a function as an argument. Do you know when each of these methods should be used?

For example, if you have a button that can be enabled or disabled, you might have a state called isDisabled that contains a Boolean value. If you wanted to switch the state of the button, you might write code like this:

// setState takes an object as an argument
this.setState({ isDisabled:!this.state.isDisabled })
Copy the code

So, what’s wrong with that? The problem is that React status updates can be batchupdated, which means that multiple status updates can occur in a single update cycle. If your updates are going to be batch processed and you have multiple updates to the isDisabled state, the end result may not be what you expected.

A more correct way to update the state is to provide a function of the previous state as an argument:

this.setState(prevState= > ({ isDisabled: !prevState.isDisabled }))
Copy the code

Now, even if your status updates are batched and there are multiple updates operating on the isDisabled state, each update relies on the correct previous state, so you will always get the expected result.

The same is true for a similar increment counter.

// Don't do that
this.setState({ counterValue: this.state.counterValue + 1 })
// The correct way to write
this.setState(prevState= > ({ counterValue: prevState.counterValue + 1 }))
Copy the code

Forget that setState is asynchronous

Finally, it is important to remember that setState is an asynchronous method.

Beginners can first understand as asynchronous, but strictly speaking, need to distinguish conditions.

For example, the React internal lifecycle and event handlers are asynchronous.

For example, calling setState from the setTimeout function is synchronous.

For example, suppose we have a React component in the following state:

this.state = { name: 'John' }
Copy the code

There is a method to update the status and print the new status to the console:

this.setState({ name: 'Matt' })
console.log(this.state.name)
Copy the code

You might think it would be Matt, but it won’t! It prints John!

This is because setState is asynchronous. This means that when setState is executed, the truly updated operation is placed on an asynchronous queue, but the synchronization code below it executes immediately, so the printed state is not up to date.

React allows you to pass a callback function that will run after the update is complete if you want to get the latest update status.

this.setState({ name: 'Matt'}, () = >console.log(this.state.name))
Copy the code

Problem solved! It now records Matt correctly.

conclusion

All right! Here are three common React mistakes and how to correct them. Remember, it’s normal to make mistakes, but avoid making the same mistakes. You’re learning, I’m learning, we’re all learning. Let’s keep learning and get better together.

Refer to the link