To Master React, Stop Thinking About Component Lifecycles and Start Thinking in Terms of Renders | by Bill Wohlers | May, 2022

You’re taking a look at perform elements fallacious

Picture by Laura Gilchrist on Unsplash

Properly, perhaps not you — however numerous individuals basically misunderstand perform elements in React. It’s a disgrace, as a result of they provide a predictable and declarative method to constructing a UI.

As elegant as it’s, although, the method isn’t all the time intuitive, particularly for builders used to libraries with numerous reactive “magic” (like Vue and Svelte) or libraries that take a extra crucial method (like jQuery).

By means of some examples, we’ll dive into the basics of perform elements in React and why chances are you’ll be interested by them fallacious.

Earlier than Hooks had been launched to React, perform elements needed to be pure (no state or unwanted effects). Regardless of these restrictions, they supplied a simplicity and predictability that class elements lacked.

As well as, they launched a basic precept that now underlies React usually: the view is a perform of the mannequin.

For pure elements, the “mannequin” is not more than the part’s props. So for now, we are able to consider perform elements as only a perform that accepts props and returns a view. Easy, proper?

After all, in the actual world, UIs aren’t pure. Most importantly, they’ve this pesky factor known as state, and it ruins every part. By definition, state can’t be an enter to the perform (that will simply be a prop), which suggests perform elements want a approach to “know” about stateful knowledge with out accepting it as an argument. Enter Hooks.

You would possibly suppose that Hooks utterly violate our psychological mannequin that the view is a perform of the mannequin. They don’t. The view isn’t a pure perform of the mannequin — statefulness prevents that — however pondering when it comes to V = f(M) nonetheless helps us write higher code.

Hooks are like an escape from our perform into the surface, stateful world. How they actually work actually isn’t that complicated, however it’s out of scope for now.

What’s actually vital to know about Hooks is that there’s no reactive magic happening. They’re simply regular variables that may be accessed within the scope of a perform part.

How does this work in observe?

Rendering a perform part is so simple as calling the perform. This sounds apparent, however it’s vital to essentially internalize this: each time a part is rendered or re-rendered, there’s no magic taking place, only a easy perform name that returns a view (JSX, in React’s case).

Pure elements solely should be re-rendered when props change. React’s job on this case may be very easy: each time props change, name the part perform, cross within the new prop values, and show the returned JSX.

Rendering a part with Hooks is extra difficult. Let’s take the useState Hook for example. It performs two vital roles within the rendering course of:

  1. It tells React to re-render the part each time the setter perform is named
  2. It has to produce each the state’s present worth and the setter perform in every render

We’ll deal with the implications of the second, for the reason that first just isn’t notably fascinating and past the scope of this dialogue.

Keep in mind that a re-render is so simple as calling the perform. Think about we re-render this part:

Primary React counter app

You would possibly suppose that there’s some magical reactivity happening with counter, however there isn’t. It’s a const: its worth by no means modifications throughout the scope of the perform name.

(By the way in which, now is an efficient time to brush up on closures in Javascript. You possibly can’t grasp React with out understanding closures.)

This can be a traditional gotcha for React customers migrating from class elements to perform elements for the primary time. With class elements, state is mutable, so any reference to state values will all the time provide the true newest worth.

Not so in perform elements. Let’s say we add a delayed print assertion to our increment callback. If we click on the increment button for the primary time, what quantity do you suppose will likely be printed?

Counter app, with a timeout…what’s going to occur?

Although 1 might sound the intuitive reply, the worth printed is definitely 0. However why?

Keep in mind that counter is a continuing throughout the scope of the perform name. The button handler is created throughout this perform name, and counter is about completely to 0. So, within the first render, useState supplies the preliminary state worth, and it’s substituted like in some other Javascript perform:

What the primary render of our part seems like

It ought to now be clearer to see that the setTimeout callback can solely print regardless of the worth of counter was when the callback was created. And importantly, even when the worth of counter was up to date later and the part is re-rendered, the preliminary callback gained’t change; as an alternative, the brand new render will create a brand new callback that may then print the up to date worth.

Your entire course of runs one thing like this:

  1. Preliminary render. counter is 0, so the clicking handler creates a callback that may console.log(0) after 1 second
  2. Re-render, since setCounter has been known as. Now, the identical render perform is named once more, however this time counter has a price of 1, however solely within the scope of this new perform name. The timeout handler that’s nonetheless ready to execute stays unchanged (due to closures).
  3. After 3 seconds, the callback that was created within the preliminary render is executed, printing 0.

A lot of individuals suppose that the distinction between perform elements and sophistication elements in React is only a matter of how the elements are literally written.

To grasp React, it’s a must to suppose in the identical manner perform elements do. Relatively than interested by part lifecycles, suppose when it comes to renders: what’s inflicting your part to re-render when it does (prop modifications, state modifications, and many others.)? What are the values supplied by props and Hooks, and are they immutable?

This method to creating perform elements will enable you to perceive them extra deeply, diagnose and repair bugs quicker, and design extra predictable, cleaner UI elements.

More Posts