Taking Advantage of React Functional Concepts: Part 1

React was created following some functional patterns. If we can understand the core concepts that are embedded in the architecture will lead us to a better understanding and therefore the chance to create more reliable, simpler and better solutions.

In these series of articles we will :

• Review some of the functional concepts

• Identify them on the react workflow

• Analyze why we should implement them when we are designing our solutions.

• And finally, analyze some examples of how we can take advantage of them

Functional programming is a part of a larger programming paradigm: declarative programming. So first we will understand what this is so it will be easier to understand some functional principles. This consists of directing a program on what needs to be done, instead of telling it how to do it step by step.

It is easier to visualize it when we compare it with imperative programming, a style that is only concerned with how to achieve results with code.

In this simple URL-friendly example :

Imperative

Imperative example

Declarative

Declarative example

We can recognize that in the declarative program, the syntax itself describes what should happen and the details of how things happen are abstracted away.

Declarative programs are easy to reason about because the code itself describes what is happening.

Besides the declarative side, functional programming is about following some key concepts, that at the same, time they are also the heart of how React works.

Immutable:

Immutable means that in react data shouldn’t change. If data needs to be modified, a copy of the original is made then the change is applied. The state and props data in the React component should be immutable if we want a component to work consistently.

React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it’s easy to implement a fast shouldComponentUpdate() method to significantly speed up your app.

Why will the immutable principle help us to create a better solution?

Immutability increases predictability, performance and allows for mutation tracking.

• Predictability: Mutation creates side effects, which can cause bugs and problems in the long run. When you enforce immutability you can keep your application simple, which makes it easier to reason about your application.
• Performance: Immutability does not help performance by itself but with a little extra architecture, immutable objects can make use of structural sharing to reduce memory overhead.
• Mutation Tracking: Besides reduced memory usage, immutability allows you to optimize your application by making use of reference and value equality. This makes it easy to see if anything has changed.

How I can take advantage of this principle in my application?

You can use methods than enforce immutability when working with objects and arrays or use third-party libraries.

Implementing immutability

In most real applications, your state and properties will be objects and arrays, for these, you can use some methods provided by JavaScript to create new versions of them.

For objects, instead of manually creating an object with the new property:

You can use Object.assign, or you can use the spread operator with the same effect (the difference is that Object.assign() uses setter methods to assign new values while this operator doesn’t):

For arrays, you can also use the spread operator to create arrays with new values, or you can use methods like ‘concat’ or slice that return a new array without modifying the original one:

However, there are disadvantages in implementing these approaches:

• This could be a slow operation for big objects/arrays.
• Objects and arrays are mutable so you will need to remember to use one of these methods every time.

Third-party libraries

The React team recommend:

• Immutable.js
• Immer
• Immutability-helper

Note: Redux also implements this principle in its architecture.

For more details refer to the following link:

Immutability in React: There’s nothing wrong with mutating objects — LogRocket Blog

Conclusion

Knowing and applying this concept to your development can bring increased performance to your app, and leads to simpler programming and debugging.

In the next articles, we will be reviewing:

• Pure Functions
• High order components

The more we know the better solutions we can develop.

References

• Learning React, 2nd Edition by Alex Banks, Eve Porcello Published O’Reilly Media, Inc
• 22 Performance Optimization Techniques for React by Mayank Gupta
• Immutability in React: There’s nothing wrong with mutating objects — LogRocket Blog by Esteban Herrera
• Working with React Pure Components by Mayank Gupta