Little React Things: React applications are functions

This is the first post of the Little React Things series and lays the foundation for the posts to follow. Consequently, it will probably be the longest post of the series, so hang in there!

React applications are functions

What are React applications? A React application is a React component that is often made up of smaller React components. What is a React component? It's a function. Then according to the transitive property, a React application is a function. Hooray logic.

Many of you have seen this notation f(x) = y where f is a function, x the input (or parameters), and y the output. A React application is the f in that equation, x is your React state, and y is the resulting user interface.

Just a note, when I say "React state", I'm talking about all the React state in your application, from all your uses of useState, useReducer, or your favorite state management library (or your least favorite).

If we were to take a closer look at the body of such a function f, it might look something like:

function f(x) {
	return (
		<div id="my-react-application">
			<h1>Hello, {x.name}</h1>
			{f1(x)}
			{f2(x)}
			{f3(x)}
		</div>
	)
}

where f1, f2, and f3 are various React children components (with bodies that can also look like the code above) of this component.

When is the function called?

The React function is called whenever x changes. Whenever the React state changes, the function is "called" and a new UI is returned. Now, technically, if a piece of state is only scoped to a child component (like let's say f1 in the code above), React is aware enough to call just that sub-function and not the whole thing.

Does f(x) always return the same y?

In other words, are React applications "pure functions"? No, they are not. They can be! But usually are not. Though state changes are the only thing to cause the function to be called, there are other things outside React state that affect the resulting UI. The resulting UI could be affected by the browser window size, the current time, or even just a random number generator.

Implications

If React applications are functions, then it follows that guidance for writing good functions applies to writing good React applications (more logic!).

Call the function as few times as possible

Calling the same function over and over and over again obviously can cause performance issues in any kind of system. Furthermore, the more you call the function, the more opportunities you are creating for that function to fail.

Keep the parameters simple

Let's say you have a function, numberStuff(x: number). You'll want to make sure you write your function in such a way that it works gracefully with whatever number the user passes in. They could pass in a positive number, a negative number, or even zero - not too many options to worry about there.

Now let's say you have another function, moreNumberStuff(x: number, y:number). With two parameters, you need to be even more careful how you write this function. This function needs to work gracefully if x is positive and y is negative, if they're both positive, if one is zero, or if they're both zero. You've potentially increased the complexity just by adding another parameter.

The same applies to your React state, the more complex your React state, the more complex your React components need to be in order to render a reasonable UI given all the potential permutations.

Use memoization

From Wikipedia:

In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

React has a built in higher order component for performing this technique, memo. Memoization like any technique is not a silver bullet. Like anything in software development, there are tradeoffs. When and how to use memo could be a post on its own, in fact it often is. One that I recommend is Use React.memo() wisely (dmitripavlutin.com).

I hope to provide practical React tips to apply these guidelines in the following posts of this series. So, stay tuned!