Fundamentals of functional programming with React

Click for: original source

Understanding the concept of functional programming is a valuable skill for React developers. It is an important topic that most React beginners often overlook, making them encounter problems when understanding how React makes some of its decisions. By Ibadehin Mojeed.

One improvement React provides is passing a callback to the updater function. In this callback, we can access the previous version of the state, and from there, we can update the state value

const handleClick = () => setCount((prev) => prev + 1);

The tutorial then explains the following concepts:

  • A quick overview of functional programming
  • Functions in mathematics
  • Functional programming in React
  • How React implements the pure functional concept
  • Improving app performance
  • A pure functional concept in the state update
  • Avoiding mutating data (immutability)
  • Avoiding side effects
  • Composition in React

Performing side effects directly inside the body of a component is not allowed to avoid inconsistencies in our app. Instead, we must isolate this effect from the rendering logic. React provides us with a Hook called useEffect to manage our side effects. Good read!

[Read More]

Tags functional-programming react nodejs web-development javascript