Writing elegant React code

Jhornan Colina
Feb 12 · 5 min read

As a React Developer we need to know how to make our code simpler and easier to read. Today I will give you some tips and tricks on react that can help you to make code with elegance. This is just the basic elegance on React, I’ll try to write more post talking about this amazing library.

Pd: This is a very sort post about how to have a good code on React, if you’re interested I’ll give you some articles with more information.

SEUNGWON HONG

We already know that be a good coder could be a little bit difficult, more if you don’t know any good practice on JavaScript. So, in this short post, we’ll talk about React and some good practices that we need to keep present, let’s started!


Index

  1. PureComponent or Component
  2. Why do we need to use destructuring on React?
  3. Learning to use properly setState method.

PureComponent or Component

When we’re using a class component we have the two different options use a PureComponent or Component so, what’s the difference?

If we make a research about lifecycles inside of the React documentation we’ll find that we have a method called shouldComponentUpdate here an example:

So, this function will make a comparison between the next prop value and the actual prop value that have your component (remember React is async) so, if this function returns true your component will be re-rendered with the new props value.

The big difference is if you’re using React.PureComponent you won’t need to write this method because React knows that it needs to make by itself the comparison but, if you really need to use this method you need to use React.Component.

Ey, here you can learn more about lifecycles on React 👋

Why do we need to use destructuring on React?

In the ES6 we have the destructuring that allows us to have a shortcode if you don't’ know how destructing works we need first search about it using the always reliable MDN from Mozilla to understand how this works.

With destructing, we can extract information inside of arrays or objects in an easier way, so we can explain the destructuring watching the difference in these two images:

As you can see, I’m trying to get a dragon using the normal way to get an element inside of an array, nothing special

So, this is destruction. With destructuring, we can extract some values or properties inside of an array or object.

Destructuring on React

When we’re using React sometimes we need to create a lot of props and we have two options, the first one is using this.props.propName (if we’re using a class component) or a simple parameter called props (in functional components) and using destructuring.

I’ll show you two examples, one of them will be without destructuring and another with destructuring

If you don’t need a lot of props you can use it but, if you need to create a lot of props the best way that you need to follow will be destructuring

As you can see we’re using destructuring to create some props that we’ll use, this way it’s easier to read and keep also you can use it in functional components.

Here some examples about the difference but using functional components, sometimes we need a lot of props so it’s crucial to know about destructuring more when we’re using hooks.

When we’re using functional component we need to create a parameter called props to create properties, but we can use destructuring to make it simpler

Remember that a functional component will receive as a parameter an object so we can use destructuring to create new properties without using the normal way.


Learning to use properly setState method

First of all, we need to know how React components work. Actually we know that every component that we use on React it’s like a pure function, which means the same props will give us the same results.

If you remember I said you that React was written on functional programming paradigm so we can’t change directly the state of a component.

So, understand how setState works it’s something that we need to keep present all the time for example:

Let me explain this code, I’m trying to change the actual value of isHappy and as you can see I’m not trying to change it directly, this will return a new state with the new values.

How to avoid this? As we know setState has a callback so we can use it to get the actual value of inputValue.

If you don’t know anything about callbacks it’s “Just a function that is executed after of another function”. So, we need to make the console log after the change, this will give us the actual value of inputValue:

Now, we can show the actual value of inputValue using the setState callback.

You can create a new scope if you want to take more actions than just a console log.

Sometimes you need to use the same function for different props. So, we can create dynamic keys.

can learn more about it just here ✌️


JavaScript in Plain English

Learn the web's most important programming language.

Jhornan Colina

Written by

Hey! maybe you already know my name, I’m React Developer and JavaScript evangelist two things, two passions.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade