4 Common Mistakes When Using React to Avoid
By: Amy J. Andrews
Tags: Frontend Development, Web Development, Javascript Development, React, JavaScript

4 Common Mistakes When Using React to Avoid

Photo by Daniela Holzer on Unsplash

React is a great library nowadays. It eases the process to build beautiful and smooth web applications.

But there are some common mistakes if you don’t notice, it will create a burden for your project later.

Without any further ado, let’s dive right in to know what mistakes you should avoid when using React.

1. Create Superman Components

Superman components are components that can do many things.

I once experienced that kind of component from my coworker. He put many unrelated UI blocks into one component. Then he used a property to control the display for each block. Something like if viewId=0 then show view_0 .

class SupermanComponent extends React.Component {

render() {

return (

<div>

<div>

/* UI Block 1 */

</div>

<div>

/* UI Block 2 */

</div>

<div>

/* UI Block 3 */

</div>

<div>

/* UI Block 4 */

</div>

</div>

)

}

}

You may think it’s convenient at first. However, when the project grows, it will become a mess soon. Not to mention it will take time to investigate when problems occur.

A component should focus on only one thing. Don’t give it too much power to handle a lot of tasks for the sake of reusability and scalability.

For example, you should restrict NavBarComponent’s ability to navigation bar functionality. Unrelated other features should be removed. By doing that, you can reuse it anywhere you need.

Don’t be lazy by wrapping all features into one single component. Spend time to think what your desired component should look like and design it as unique as possible. These unique components are easier to maintain and work well together in the whole composable system.

BlockOne component:

class BlockOne extends React.Component {

render() {

return (

<div>

{ /* Block 1 */ }

</div>

)

}

} export default BlockOne;

BlockTwo component:

class BlockTwo extends React.Component {

render() {

return (

<div>

{ /* Block 2 */ }

</div>

)

}

} export default BlockTwo;

BlockThree component:

class BlockThree extends React.Component {

render() {

return (

<div>

{ /* Block 3 */ }

</div>

)

}

} export default BlockThree;

2. Pass Numbers as Strings

Take a look at the component below:

class UserDetails extends React.Component {

printGender() {

if (this.props.gender === 0) {

return ‘Male’;

}



if (this.props.gender === 1) {

return ‘Female’;

}



return ‘Other’;

} render() {

return (

<div>

Gender: {printGender()}

</div>

)

}

}

We’re using gender property as a number to decide the gender. 0 for Male , 1 for Female , and anything that differs from 0 and 1 for Other .

Now, let’s use the UserDetails component somewhere:

<UserDetails gender=“0” />

You expect the gender will be Male but it’s not. Because you pass 0 as a string not a number. So, the actual value will be Other .

To fix it, use curly brackets when passing numbers as props:

<UserDetails gender={0} />

3. Modify The State Directly

One of the most common mistakes that beginners make is modifying the state directly. Like this:

showButton() {

this.state.buttonVisibility = true;

}

You change the state directly and the React system doesn’t know about it. Thus, it might not trigger the re-rendering.

The React state should be immutable. If you try to modify it directly, errors or unexpected behaviors might occur like the UI isn’t re-rendered in the example above.

Instead of changing the state directly, you should use setState() . It will tell React, “Hey dude, I’m about to change something. Please be aware of it.” Then React will prepare everything to serve the change correctly.

showButton() {

this.setState({ buttonVisibility: true });

}

4. Use The State’s Value Right After setState()

showAvatar() {

this.setState({avatarVisibility: true}); if (this.state.avatarVisibility) {

// Do something

}

}

Can you point out the issue of the above snippet?

It’s that avatarVisibility is used right after it’s updated by setState() .

Why is it an issue?

This is a subtle mistake you may not notice but setState() works asynchronously.

It means if you use setState() to update a property, the change may not be applied immediately. That’s why using a property right after the updating can lead to unexpected behaviour.

However, you can solve this problem by using the second parameter of setState()

showAvatar() {

this.setState({avatarVisibility: true}, () => {

if (this.state.avatarVisibility) {

// Do something

}

});

}

By using the callback function, your calculation will work accurately because that callback function will be called after the state is updated.

Conclusion

Above are the common mistakes you probably make when working with React. I hope this article will help you avoid all of them to make sure everything works perfectly.