You might need to know this about React...

Please take note that I am a self-taught web developer and that my information is based solely on my experience. Thank you.

React. React. React.

That's all we ever have these days. I mean, who can blame us users? It's a breeze to handle the UI, and we don't need to handle all the verbose DOM APIs. Just import some helper functions and write superpowered HTML (JSX)... and BAM! We got an app in less than 10 minutes.

That's nice and all, but you might not know these stuff I'm about to share with you that can make you write a more optimized React application. Do take note though, if you are a beginner to JavaScript, I'd recommend learning more about JavaScript itself and write data structures using it before diving deep into React. Because it's only a library of tools built by hardworking programmers that help us build applications quicker (they call it abstractions).

Okay, let's move on.

React has a lifecycle, wherein, if a single data changes within a specific component/function, then an observer will fire, signalling the function responsible for rendering stuff into the DOM or webpage to rerun itself with the updated data. Of course, this is but a gist of the main engine carrying your React application.

Okay, the first function helper is:

  React.memo(Component)

memo! This function means that react will store the reference of the component/function you pass in it inside a memory (this is why it's important to understand data structures and how the language works first). Now, I don't know the exact data structure, but it's probably a Map.

What's the use of this?

Well, if I'm not mistaken, React's overall state management revolves around immutability. Therefore, if a parent component's data changes, then its children will also be remade (rerendered). Now, again, I don't know the inner workings of React, but I'm guessing that memo tells the render function that the component inside of memo must not be touched, thus not changing anything in that component.

This will result to faster updates. Great! But, there's a caveat though. We will need to watch out for its props since React will rerender a memoized component if its props gets reevaluated/rendered (again, these are probably handled with ids or references of some sort to check if something is new or not).

To make sure this does not occur and that a component is memoized properly, we have two helpers for this:

 React.useMemo(() => recalculated val, [deps]);

 React.useCallback(callback, [deps]);

useMemo takes two arguments:

1. A callback function that returns a value.
2. An array of depencies which React will look through to see if the values inside of those dependencies change at some point. If so, then rerun the callback function.

useMemo returns the value returned by the callback, and of course it stays the same until one or more of the dependencies change in value.

Why is this necessary? Well, since React always rerender by default, then that means it reads your code line-by-line. And since JavaScript is single-threaded, or, in other words, executes your code line by line. Therefore, if there is a function inside a component that does a loop for 100000 times before returning its value to a variable you're assigning it to, then you will have to wait for that before changes to the UI/DOM can be see.

Also, this is great for React.memo if you pass the value from React.useMemo as one of the props of the memoized component.

Awesome! Now, let's talk about React.useCallback. This is the same as React.useMemo except for the fact that it memoizes functions instead. Since at its bare bones, functions are only objects with references and special properties I don't know yet to it, then that means it can change in value.

So, for example:

let i = 0

function pf() {
  console.log(i)
}

pf()

i++

pf()

In the example above, the console will log out 0 and 1. This is because the function name pf console.logged the value of the variable i, and that variable just changed its value before the second invocation of that function. That means the reference of i in the function, or I guess in the bare bones of this function, the value of i would have changed. This is why React.useCallback is used to memoize functions because they are also rerendered by React to make sure that the values of the references they have to state or variables are updated.

In conclusion, the three powerhouses for keeping the least amount of rerenders possible, well, possible, is important to be known if we want to build powerful React applications. Of course, do keep in mind that this does store values, so it will use up memory. That is all and have a nice day. God bless!