Taking Advantage of React Functional Concepts: Part 2
React was created following some functional patterns. In the last section, we discuss The Immutable Principle. In this section, we are going to follow the same structure:
- 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
Purity / Pure functions:
A pure function is a function that follows these three simple rules no more, no less.
- The function should take in at least one argument
- The function should return a value or another function.
- The function should not change or mutate any of its arguments.
They do not cause side effects, set global variables, or change anything about the application state, here are a few scenarios that pure functions avoid:
- Modifying any external variable or object property
- Logging data to the console
- Writing Data to a file
- Writing data to the network
- Triggering any external process
- Calling any other functions with side-effects
- Making Asynchronous Data Calls.
They treat their arguments as immutable data.
Why the purity concept will help us to create a better solution?
The main advantage is that pure functions are naturally testable. They do not change anything about their environment, and therefore do not require a complicated test setup.
Also, pure Functions have a huge performance impact during execution on the Browser.
How I can take advantage of this principle in my application?
A React component can be considered pure if it renders the same output for the same state and props.
To implement this principle you can use :
- Pure Components, for class components
- Functional Components with hooks.
Pure Components
It is the same as a normal component, except that Pure components have some performance improvements and render optimizations since React implements the shouldComponentUpdate() method for them with a shallow comparison for props and state.
React Components re-renders in the following scenarios:
- “setState” is called in Component
- “props” values are updated
this.forceUpdate()is called
In the case of Pure Components, the React components do not re-render blindly without considering the updated values of React “props” and “state”. If updated values are the same as previous values, render is not triggered.
If the previous state and props data is the same as the next props or state, the component is not re-rendered.
For more details refer to the following link:
Functional Components with hooks
Functional components are very useful in React, especially when you want to isolate state management from the component.
Note: Functional components cannot have the performance improvements and render optimizations that come with React.PureComponent. However, for this, we can use React.memo a HOC that we will discuss in the next functional concept.
React hooks are the new addition to the React 16.8 Version.
Hooks were designed to solve problems presented with class components by providing a solution to incorporate functionality into functional components.
They presented these ‘super tools’ to use with our functional components:
- useState: We call it inside a function component to add some local state to it. React will preserve this state between re-renders.
- useEffect: It serves the same purpose as
componentDidMount,componentDidUpdateandcomponentWillUnmountin React classes, but unified into a single API.
- custom: You can develop your reusable state management.
This new feature could help us to use more functional components to reuse functionality across components.
For more details refer to the following link:
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 article, we will be reviewing:
- 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
