Why React is not Functional

What is functional programming?

What is cool about functional programming?

  • Verification: It is much more straightforward to reason about functional programs than it is about imperative programs. This gives us increased confidence in the correctness of programs.
  • Parallelism: Since expressions in FP have no side-effects, it is natural to use parallel evaluation: the values of independent subexpressions may be determined simultaneously, without fear of interference or conflict, and the final result is not affected by evaluation order.
  • Data-centric computation: Operations act on compound data structures as whole, rather than via item-by-item processing. That means you get to use statements such as this example which calculates the sum of the first 10 prime numbers:
    const sum = [...Array(100)].map((_, i) => i).filter(n => is_prime(n)).slice(0, 10).reduce((a, b) => a + b, 0);

Key principles

  • Pure functions: Functional programs are constructed using only pure functions, meaning functions that have no side effects. A function has a side effect if it does anything other than simply return a result. For example, modifying global state, printing a message to the console, and mutating the DOM are all side effects. Side effects make reasoning about program behavior more difficult.
  • Referential transparency: Can a specific call to your function be replaced with its corresponding return value without changing the program’s behavior? This is a requirement in order to be functional. This is called referential transparency.

Functional programming in practice

Functional programming and React

function SayHello(props: { name: string }): JSX.Element {
return <div>Hello, {props.name}</div>;
  • From React documentation: “The Effect Hook lets you perform side effects in function components.” But functions in FP are supposed to be pure, which means they are supposed to be free of side effects!
  • From React useState documentation: “This is a way to ‘preserve’ some values between the function calls”. That’s not allowed in functional programming! Functions in FP functions are stateless, and they are only allowed to look at their parameters in order to calculate the return value.

Does Algebraic Effects provide salvation?

Should React have stayed with classes?


Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Using ES6 import and export statements for Jest testing in Node.js

Implement react-ga on HOC

This Week I Learned: JQuery and Ajax

Wordpress + Web Components = Awesome ✨

Fomir: A Schema-First form library

Why is React’s key prop important?

How to Use Analytics in Your React Native App With Firebase

Redirect After Login with Reach Router

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


More from Medium

Difference between CLASS component and FUNCTIONAL component in React.

Redux Who? Handle your own state instead

React Component Composition, state and data fetching hooks

My working from home setup for 2021

All About React Hook