Before we can start looking into pure components, the concept of pure functions needs to be understood.

What is a pure function?

A pure function is a function that is deterministic and has no side effects. Pure functions came about from functional programming.

But what does this even mean????

Deterministic vs. Non-deterministic functions

A deterministic function is a function that when given an input, it always produces the same output. This means you can determine the result for example (x * 3) will always produce the same answer if n = 2 => 6.

Whereas a non-deterministic you can not predict the result. A non-deterministic function could be Math.Random(n), you can never sure what it will return. Some instance where functions will be non-deterministic is when the output relies on data like, API’s within the function, or often when it relies on outside input, though this issue can be overcome.

Side effects

Side effects are when the code inside the function has a side effect outside the code. Some examples are console.log(), alert and changing outside variables. This will make more sense soon.

So what is the reason for pure functions?

Pure functions make it easier to read the code, debug due to it not having any side effect and easier to test.

So here is an example of changing a function into a pure function

This is not a pure function. First, the result of x = 4 will be different each time because the function relies on array which changes. Secondly, it has a side effect because it changes array.

This is how we change it to a pure function:

Because our function is creating a new array in the return it does alter the original array. This means it has no side effects. It also means that because array is not being altered

x=4 => [1, 2, 3, 4] no matter what.

Now we have a pure function.

What is a pure component?

A pure component is a component that renders only when the state or prop of the class has changed. To implement it, you need to follow the same rules as a pure function. It must not have side effects and be deterministic.

Why do we need pure components?

Using pure components significantly improve the performance rate of the app. The reason being is that plain components renders every time the state changes. This sounds ok but if you have a lot of children in that component that are also plain components and the state of the parent component renders all the children are going to render as well. This is very costly. Whereas a pure component will only render if the props or state of that component has changed. So now by making the children pure components, instead of them all rendering each time the parent state changes, only a few of them might render.

But this so complicated, how does it work?

If you know react lifecycle methods you have probably heard of the method ShouldComponentUpdate. This method checks if the prev params === current params and if it is not it renders the component. Pure components automatically do this for you for the state and props, which is why it is so efficient. Because pure components do this automatically, you do not have access to ShouldComponentUpdate. There is one slight issue…. Pure components only do a shallow comparison meaning it does not check for nested arrays and objects.

Some things to take into consideration

This means, do not directly change the value of props and change the state using this.setstate

If you have a function inside the class and want the page to render each time the function is run, make sure the function is changing the state else it won’t re-render.

All the children of the pure component must also be pure.

If you want to do a deep comparison for pure components use the forceUpdate function, though this takes a lot of processing power.

So to make a pure component all you need to do is change


to this

and this

to this