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.
- PureComponent or Component
- Why do we need to use destructuring on React?
- 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.
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.
“Give me some claps if this helped you. Ey, I’ve another articles maybe could be of you interest”