DEV Community: Mario Prasetya M.

Preventing Form Input Lag in Material UI ReactJS

Mario Prasetya M. — Fri, 21 Apr 2023 01:57:27 +0000

Once in my work I stumbled into issue that ruined user experience in my web app. There were severe input lag in my large form that consist of dozen inputs. The input lag came up whenever user typed quickly in text or number input.

That time I was using ReactJS with Material UI as a base design. Material UI is renowned for its beautiful design with easy API. But the cost is that the library itself contribute in making built bundle bloated. Also Material UI is considered heavy when it comes to performance. So optimization become priority when I use Material UI.

Back to the topic, how do I overcome the problem. It turned out I found 2 solutions that could help optimizing the form.

#1: The Native Way

In order to demonstrate the solution, I already made demo project with the same requirements.

There are several inputs that represent order data. These inputs are controlled manually by useState binding.



function OrderForm() {
  const [payloadType, setPayloadType] = React.useState<string>('kg')
  const [payloadWeight, setPayloadWeight] = React.useState<string>('0')
  const [cargo, setCargo] = React.useState<string>('')
  const [originCheckpoint, setOriginCheckpoint] = React.useState<string>('')
  const [destinationCheckpoint, setDestinationCheckpoint] = React.useState<string>('')
  const [driverName, setDriverName] = React.useState<string>('')
  const [truckLicensePlate, setTruckLicensePlate] = React.useState<string>('')
  const adornmentLabel = React.useMemo<string>(
    () => payloadType === 'pound' ? 'lb' : 'kg',
    [payloadType]
  )

  const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
  }

  return (
    <>
      <Typography variant="h2" fontWeight={600} fontSize={24} sx={{ mb: 2 }}>
        Order Form
      </Typography>
      <form onSubmit={submitHandler} style={{ width: '80%', maxWidth: '400px', display: 'block', margin: 'auto' }}>
        <RadioInput
          name='payloadType'
          label='Payload Type'
          onChange={(value) => setPayloadType(value)}
          value={payloadType}
          choices={[
            { label: 'Kg', value: 'kg', },
            { label: 'Pound', value: 'pound', },
          ]}
        />
        <NumberInput
          label='Weight'
          name="weight"
          value={payloadWeight}
          onChange={(value) => setPayloadWeight(value)}
          adornmentLabel={adornmentLabel}
        />
        <TextInput
          label='Cargo'
          name="cargo"
          value={cargo}
          onChange={(value) => setCargo(value)}
        />
        <TextInput
          label='Origin Checkpoint'
          name="originCheckpoint"
          value={originCheckpoint}
          onChange={(value) => setOriginCheckpoint(value)}
        />
        <TextInput
          label='Destination Checkpoint'
          name="destinationCheckpoint"
          value={destinationCheckpoint}
          onChange={(value) => setDestinationCheckpoint(value)}
        />
        <TextInput
          label='Driver Name'
          name="driverName"
          value={driverName}
          onChange={(value) => setDriverName(value)}
        />
        <TextInput
          label='Truck License Plate'
          name="truckLicensePlate"
          value={truckLicensePlate}
          onChange={(value) => setTruckLicensePlate(value)}
        />
        <TextInput label='Other Input 1' name="otherInput1" value={''} onChange={() => { }} />
        <TextInput label='Other Input 2' name="otherInput2" value={''} onChange={() => { }} />
        <TextInput label='Other Input 3' name="otherInput3" value={''} onChange={() => { }} />
        <TextInput label='Other Input 4' name="otherInput4" value={''} onChange={() => { }} />
        <Button type="submit" variant="contained" sx={{ mt: 3 }}>Submit</Button>
      </form>
    </>
  )
}

Just ignore the detail implementation of TextInput, NumberInput, and RadioInput. These components are just Material UI TextField with some design modification to fit the current design system.

Visually whenever user type quickly in one of the input, there's slight delay before what user typed shows in the screen. But I think it's not wise to judge performance just by checking it visually, we need precise metrics.

I'll use React DevTools profiler to measure website performance while typing in one of the inputs. This tool can be installed as a website extension and pretty easy to use. You can read more about this profiler by reading their blog here.

The performance gonna be measured by defining a simple scenario. I will turn on the profiler and then type a single character in cargo input and then turn off the profiler. After that we can judge the performance by looking at the commit histories.

Let's take a look at the result above. I'm using Ranked section since it give clearer result. Then move the commit into second commit. This commit show how many components were re-rendered after I typed one character.

From there we can see that there are many yellow bars. These yellow bars represent components render time. We can see that many yellow bars are shown which conclude that typing one character in cargo input results that many components re-render. It costs 37ms duration in total. So how do we improve it?

As you probably know, there are several techniques in ReactJS to prevent component re-render. In the context of preventing component from re-rendering, we can use memo. memo is a component wrapper that could prevent component re-render by comparing component properties manually. Shortly, if component properties after re-render is not the same as component properties before re-render, then re-render that component. We can implement memo in our component input (TextInput, NumberInput, and RadioInput).



import { FormControl, FormLabel, TextField } from '@mui/material';
import React from 'react'

interface TextInputProps {
  value: string;
  onChange: (value: string) => void;
  label: string;
  name: string;
}

function TextInput(props: TextInputProps) {
  return (
    <FormControl sx={{ display: 'flex' }}>
      <FormLabel id={props.name} sx={{ textAlign: 'start', mt: 1 }}>
        {props.label}
      </FormLabel>
      <TextField
        aria-labelledby={props.name}
        name={props.name}
        size='small'
        type="text"
        fullWidth
        value={props.value}
        onChange={(e) => props.onChange(e.target.value)}
      />
    </FormControl>
  )
}

// Before memo
// export default TextInput;

// After memo
export default React.memo(TextInput, (prev, next) => {
  return prev.value === next.value
    && prev.name === next.name
    && prev.label === next.label;
})

The component above is the implementation of TextInput. We can ignore the implementation detail and just focus on component properties and React.memo. By default, components are exported by using default export directly. But when using memo, component are wrapped first before exported. This wrapper also receive function that receives 2 arguements, previous properties and next properties.

The function acts as a comparator that compare properties before and after re-render. When the function result true then the component is not re-rendered, and vice versa.

We can see that I didn't compare onChange property. FYI, ReactJS treat function and object differently. When ReactJS do comparison for function or object, the result is always different. So we can omit this for now since our onChange function will never be changed.

Apply memo to all of our input components. Let's see the result.

As you can see, the number of components that are re-rendered are reduced significantly. The duration in total for the second commit are also reduced from 37ms to 17ms. More than 50%! Visually, any input delay that happened before is also gone. The form is working smoothly!

#2: Librarian

If you think it's more convenient to use 3rd party library for doing form. There are several library that help us dealing with form. The most prominent one is Formik.

Formik helps us deals with form by shortening form and its inputs binding process. But in background, Formik implementation is almost the same as native binding. This library can't prevent unnecessary re-render that happen when we type in the form. So additional configuration is needed like I already demonstrated before.

Other library that exists are React Hook Form. I personally like this library better. I have used Formik and React Hook Form in my projects and I think the second win my heart. This library can prevent unnecessary component re-render by using special technique in binding inputs. Not also preventing re-render, this library bundle size is also much smaller than Formik. If you are interested more with the comparison, check out this article.

Closing

So that's all from me. What do you think of this article? Let me know your thoughts :D

If you like my article, make sure to click the ❤️ button.

Setting Up Forms in ReactJS Quickly

Mario Prasetya M. — Mon, 17 Apr 2023 05:14:26 +0000

Setting up forms in Front-End work could be a tedious work. There are multiple things to do that are repetitive like designing input, filling input properties, integrating with 3rd party library, and many more. My suggestion to tackle these problems is by making form components reusable.

Making form components reusable could greatly reduce time spent in developing form. Also our code will be much more readable since we are abstracting the way we write our form and its inputs. These could lead into better developer experience and also faster feature development. Here are step by step to make our form components.

Start by Translating Design System into Separate Components

The easiest way to decouple our components is by looking at the UI/UX design or mockups. From that we can get a glimpse of how we should structure our components. In the form context, I usually making each input type like text, number, date, etc. into separate components. Don't think about how our input integrated with entire form yet, start by designing our input component one by one. I personally think our input design should be isolated therefore whenever we need to improve our input, we know which CSS or other style API should we change.

This approach could make our code much shorter and readable. Take a look at this comparison.

First code

const MyForm = () => {
    return (
        <form>
            <input
                type="text"
                id="full_name"
                name="full_name"
                value=""
                placeholder='Full Name'
                aria-placeholder='Full Name'
                required
                aria-required
            />
            <input
                type="email"
                id="email"
                name="email"
                value=""
                autoComplete='email'
                placeholder='Email'
                aria-placeholder='Email'
                required
                aria-required
            />
            <input
                type="password"
                id="password"
                name="password"
                placeholder='Password'
                aria-placeholder='Password'
                value=""
                required
                aria-required
            />
        </form>
    )
}

Second code

const MyForm = () => {
    return (
        <form>
            <TextInput name="full_name" placeholder="Full Name" required />
            <EmailInput name="email" placeholder="Email" required />
            <PasswordInput name="password" placeholder="Password" required />
        </form>
    )
}

Which one do you think more readable?

Integrate Inputs with Whole Form

There are multiple ways to integrate our inputs with the form. Natively, input should be controlled by useState hooks by filling the value and onChange properties in input. For simple form, we can use this approach. It will look something like this.

const MyForm = () => {
    const [name, setName] = useState<string>('')
    const [email, setEmail] = useState<string>('')
    const [password, setPassword] = useState<string>('')

    return (
        <form>
            <TextInput
                name="full_name"
                placeholder="Full Name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
            />
            <EmailInput
                name="email"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
            />
            <PasswordInput
                name="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
            />
        </form>
    )
}

We need to define onChange and value properties in the input component. On the parent where the form exists, several states are defined. Each state corresponds to its input. They are passed down one by one for every input.

This approach is actually fine. But usually when I'm working with form, there's input validation on client side before the form is submitted. Also there are some cases where input is depended into the other input/s. Doing form natively can be pretty cumbersome since we need to manually declare everything from scratch.

I'd like to use library called react-hook-form when doing form. By using this form we can eliminate repetitive code such as controlling form, validating, etc. I'm not gonna focus on why this library is great but how do we use this library to support our input components. In order to integrate this library with our input, we need to wrap our form with their context called FormProvider.

import { useForm, FormProvider } from 'react-hook-form'

interface MyFormValues {
    name: string;
    email: string;
    password: string;
}

const MyForm = () => {
    const methods = useForm<MyFormValues>({
        defaultValues: {
            name: '',
            email: '',
            password: '',
        },
    })

    return (
        <FormProvider {...methods}>
            <form>
                <TextInput name="full_name" placeholder="Full Name" required />
                <EmailInput name="email" placeholder="Email" required />
                <PasswordInput name="password" placeholder="Password" required />
            </form>
        </FormProvider>
    )
}

react-hook-form requires additional setup. FormProvider wrapper needs to receive some properties that can be covered by using useForm hook. This hook requires several arguments like the form values model for TypeScript (type or interface that represents all values in the form, this this case is MyFormValues) and configuration object as a function parameter. We can define the form default values inside the configuration object.

By using FormProvider, any child components inside FormProvider are able to access form metadata, including the current value and change handler. Next we need to modify our input components to integrate them with current FormProvider.

import { useController } from 'react-hook-form'

interface TextInputProps {
    name: string;
    placeholder: string;
    required?: boolean;
}

function TextInput(props: TextInputProps) {
    const { field } = useController({
        name: props.name,
        defaultValue: ""
    });

    return (
        <input
            type="text"
            id={props.name}
            placeholder={props.placeholder}
            aria-placeholder={props.placeholder}
            required={props.required}
            aria-required={props.required}
            {...field}
        />
    )
}

We can integrate our input with useController hooks from react-hook-form. This hook returns several variables, including field variable that contains overridden input properties such as value, name, onChange, onBlur, etc. So we can leave out the input binding to the useControllerhook.

From this step our form is already pretty much clear. The input components are already integrated with the form body so whenever we need to create new form, we just have to copy from this form with minimum code. But I'll give you another tips that could take the form development into another level.

Find Common Pattern in Our Forms

Once upon a time one of my works have to do with dashboard. Mostly the dashboard was filled with CRUD forms that deal with single data. The user interactions are also pretty much the same. I did like 3 forms by copy-pasting from one form to another and got bored. The flow was approximately like this,

Read / List

Hit get all API to show data
This API has several pagination parameter

Create

Fill up form
Hit create API
Redirect user to data table with success message on successful create
Show alert on failed create

Update

Hit get detail API to fill up initial values on form
Fill up form
Hit update API
Redirect user to data table with success message on successful update
Show alert on failed update

Delete

Hit delete button in the data list
Confirmation dialog is opened
Hit delete API if user prompts the deletion
Refresh the list and show success message on successful delete
Show alert on failed delete

There were approximately 20 forms with the same flow. Copy pasting over and over could lead into code duplication. Moreover if we need to change the form behavior, we have to revisit all of them one by one. So what did I do?

Create Custom Hook

Fortunately ReactJS has feature that could save our time copy pasting things, the custom hooks. That time I developed custom hooks that dealt with most of the flow so I could focus on form design and values model. Since there were 2 pages for each data CRUD, I create 2 custom hooks for each page. The hooks would be generic and receives some parameters like,

Request Model
Response Model
API URL
Mapper And returns variables that my form and list needs like data and handlers.

Of course there were drawbacks from doing this approach. Making things more general would make that things tightly coupled with each other. Whenever something change and doesn't fit with our current approach, we have to think the workaround which most of the time kinda ugly approach. The worst case is we have to rebuild everything again.

Also coordination with Back-End (if any) is important. Make sure the communication API is predictable and consistent over time. If something is out of place, our approach would be broken.

Closing

So that's all from me. What do you think of this article? Let me know your thoughts :D

If you like my article, make sure to click the ❤️ button.

Chaining State Update in ReactJS Efficiently

Mario Prasetya M. — Sat, 11 Mar 2023 15:05:11 +0000

Managing states in ReactJS could be tricky. Changing state could trigger components or pages re-render. If it's not managed well, components re-render could lead to performance issues.

It is not uncommon to see a component that has dozens state. Some states are changed whenever other state changed. Also those state could make other states changed and so on. Fortunately, ReactJS has several utilities that could cover something like this. I will explain in a simple real use case how I approach this situation.

Use Case

Let's suppose there's form with 2 inputs as shown in the image below,

By they way, I'm gonna implement the view by using React Typescript and Material UI. Typescript would be our best friend when building large scale application because of its type safety. Material UI would give us nice-looking theme while also giving us a lot of flexibility.

The first input is weight type that consists of two different options, Kg and Pound. Second input is number input for weight value. The second input has additional property that shows value unit in the end of the input. I'm gonna name this property adornment since Material UI also give the same name for this type of property.

The adornment value depends on first input. If user choose Kg for the value, weight value input adornment will show kg. Also for Pound value the adornment will show lb.

Our base view will be implemented like this,



import React from 'react'
import {
  Button,
  FormControl,
  FormControlLabel,
  FormLabel,
  InputAdornment,
  Radio,
  RadioGroup,
  TextField,
  Typography
} from '@mui/material'

function OrderForm() {
  return (
    <>
      <Typography variant="h2" fontWeight={600} fontSize={24} sx={{ mb: 2 }}>
        Order Form
      </Typography>
      <form
        style={{ width: '80%', maxWidth: '1000px', display: 'block', margin: 'auto' }}
      >
        <FormControl>
          <FormLabel id="payloadType-input" sx={{ textAlign: 'start' }}>
            Payload Type
          </FormLabel>
          <RadioGroup
            row
            aria-labelledby="payloadType-input"
            name="payloadType"
          >
            <FormControlLabel value="kg" control={<Radio />} label="Kg" />
            <FormControlLabel value="pound" control={<Radio />} label="Pound" />
          </RadioGroup>
          <FormLabel id="payloadWeight-input" sx={{ textAlign: 'start', mt: 1 }}>
            Weight
          </FormLabel>
          <TextField
            aria-labelledby="payloadWeight-input"
            name="payloadWeight"
            size='small'
            type="number"
            fullWidth
            InputProps={{
              endAdornment: <InputAdornment sx={{ width: 12 }} position="end">kg</InputAdornment>,
            }}
          />
          <Button type="submit" variant="contained" sx={{ mt: 3 }}>Submit</Button>
        </FormControl>
      </form>
    </>
  )
}

export default OrderForm

Next let's implement the states.

Naive Approach

If we look into the problem at a glance, there are three states that we gonna maintain. The first and second state will be the input values. The third state will be the input adornment. It makes sense making it as a state since we need to re-render the screen whenever the adornment change. Our code will be something like this.



// ...

function OrderForm() {
  // States
  const [payloadType, setPayloadType] = React.useState<string>('kg')
  const [payloadWeight, setPayloadWeight] = React.useState<string>('0')
  const [adornmentLabel, setAdornmentLabel] = React.useState<string>('kg')

  return (
    // ...  
  )
}

export default OrderForm

Our inputs will be controlled by payloadType and weight state. I will be using conventional input state binding for this example.




// ...

function OrderForm() {
  // States
  const [payloadType, setPayloadType] = React.useState<string>('kg')
  const [payloadWeight, setPayloadWeight] = React.useState<string>('0')
  const [adornmentLabel, setAdornmentLabel] = React.useState<string>('kg')

  React.useEffect(() => {
    // Assign new adornment
    const newAdornment = payloadType === 'pound' ? 'lb' : 'kg'
    setAdornmentLabel(newAdornment)
  }, [payloadType, setAdornmentLabel])

  return (
    <>
      <Typography variant="h2" fontWeight={600} fontSize={24} sx={{ mb: 2 }}>
        Order Form
      </Typography>
      <form
        style={{ width: '80%', maxWidth: '1000px', display: 'block', margin: 'auto' }}
      >
        <FormControl>
          <FormLabel id="payloadType-input" sx={{ textAlign: 'start' }}>
            Payload Type
          </FormLabel>
          <RadioGroup
            row
            aria-labelledby="payloadType-input"
            name="payloadType"
            // Input state binding
            onChange={(e) => setPayloadType(e.target.value)}
            value={payloadType}
          >
            <FormControlLabel value="kg" control={<Radio />} label="Kg" />
            <FormControlLabel value="pound" control={<Radio />} label="Pound" />
          </RadioGroup>
          <FormLabel id="payloadWeight-input" sx={{ textAlign: 'start', mt: 1 }}>
            Weight
          </FormLabel>
          <TextField
            aria-labelledby="payloadWeight-input"
            name="payloadWeight"
            size='small'
            type="number"
            fullWidth
            // Input state binding
            value={payloadWeight}
            onChange={(e) => setPayloadWeight(e.target.value)}
            // Replace with state
            InputProps={{
              endAdornment: <InputAdornment sx={{ width: 12 }} position="end">{adornmentLabel}</InputAdornment>,
            }}
          />
          <Button type="submit" variant="contained" sx={{ mt: 3 }}>Submit</Button>
        </FormControl>
      </form>
    </>
  )
}

// ...

Whenever our payloadType value changes, our input adornment should be changed based on payloadType value. In ReactJS, in order to do something whenever some values change, typically we can use useEffect. The useEffect will receive payloadType state in its dependency array since we want to do something with input adornment whenever payloadType change.

Let's try our implementation.

Yay, it works! But, does it?

The Problem

Surely it works perfectly. But let me show you something.

I'm gonna put a counter that's increased whenever the screen re-rendered. I will also log the counter in the console.




// ...

let counter = 0

function OrderForm() {
  // States
  const [payloadType, setPayloadType] = React.useState<string>('kg')
  const [payloadWeight, setPayloadWeight] = React.useState<string>('0')
  const [adornmentLabel, setAdornmentLabel] = React.useState<string>('kg')

  // Print and increase the value
  console.log('Screen is refreshed ', ++counter, ' times')

  // ...

I will refresh the page once and change the payloadType value. Take a look at the logging result.

Initially, the component is mounted for the first time so the console shows 1 value. After that, I modify payloadType value. The console is showing 2 and followed by 3. Logically, the counter should only be increased 1 because I only change payloadType value once. What's happened?

Ah I see, the value is increased two times because there are two states change. The payload type input and then the input adornment.

Sure, that's the answer. But is it the best way we can do?

Doing sort kind of thing could lead into problem. For now it's fine because there are only two inputs and three states we maintain. But as our application grow, keeping this habit could lead into performance issue.

I did this once in my previous work. First there were only like five inputs and several states. Some of those states were related to input adornment and other supporting states that were updated whenever other states update.

As time went on, the requirements grew, and I still kept doing this habit. There were 15 inputs in total with their corresponding states and other states. There was notable input lag whenever user typed into field. Interacting with the form became very painful because of this.

There are some solutions for the problem, especially dealing with large form. But I will keep this topic for later. Right now I'm gonna focus on how do we chaining those states update so that we could minimize component re-render. So how do we tackle this problem?

Update States Synchronously

Forget about useEffect, forget about chaining states. Sometimes simplest way is the best way. Instead of update the adornment inside useEffect, why don't we update the adornment directly after updating the payloadType? In order to do this we have to move our payloadType onChange handler into separate function.




  // ...

  const payloadTypeChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPayloadType(e.target.value)
  }

  return (
    <>
      <Typography variant="h2" fontWeight={600} fontSize={24} sx={{ mb: 2 }}>
        Order Form
      </Typography>
      <form onSubmit={submitHandler} style={{ width: '80%', maxWidth: '1000px', display: 'block', margin: 'auto' }}>
        <FormControl>
          <FormLabel id="payloadType-input" sx={{ textAlign: 'start' }}>
            Payload Type
          </FormLabel>
          <RadioGroup
            row
            aria-labelledby="payloadType-input"
            name="payloadType"
            // Move this
            onChange={payloadTypeChangeHandler}
            value={payloadType}
          >

  // ...

After that we can also update input adornment inside the same function.




// ...

  const payloadTypeChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPayloadType(e.target.value)

    const newAdornment = payloadType === 'pound' ? 'lb' : 'kg'
    setAdornmentLabel(newAdornment)
  }

// ...

Finally we can remove our useEffect. Now our page would only by rendered once whenever our payloadType change.

Using useMemo

I personally don't like the first approach. I think onChange function handler should only handle / control input change so that our handler won't be bloated. Whatever change that involve payloadType should stay away from our change handler.

We can achieve this by using useMemo. useMemo is a hook that save value as a result from complex calculation. Take a look at this example.



import React from 'react'
import {
  Button,
  FormControl,
  FormControlLabel,
  FormLabel,
  InputAdornment,
  Radio,
  RadioGroup,
  TextField,
  Typography
} from '@mui/material'

function OrderForm() {
  const [payloadType, setPayloadType] = React.useState<string>('kg')
  const [payloadWeight, setPayloadWeight] = React.useState<string>('0')
  // Take a look
  const adornmentLabel = payloadType === 'pound' ? 'lb' : 'kg'

  return (
    <>
      <Typography variant="h2" fontWeight={600} fontSize={24} sx={{ mb: 2 }}>
        Order Form
      </Typography>
      <form
        style={{ width: '80%', maxWidth: '1000px', display: 'block', margin: 'auto' }}
      >
        <FormControl>
          <FormLabel id="payloadType-input" sx={{ textAlign: 'start' }}>
            Payload Type
          </FormLabel>
          <RadioGroup
            row
            aria-labelledby="payloadType-input"
            name="payloadType"
            onChange={(e) => setPayloadType(e.target.value)}
            value={payloadType}
          >
            <FormControlLabel value="kg" control={<Radio />} label="Kg" />
            <FormControlLabel value="pound" control={<Radio />} label="Pound" />
          </RadioGroup>
          <FormLabel id="payloadWeight-input" sx={{ textAlign: 'start', mt: 1 }}>
            Weight
          </FormLabel>
          <TextField
            aria-labelledby="payloadWeight-input"
            name="payloadWeight"
            size='small'
            type="number"
            fullWidth
            value={payloadWeight}
            onChange={(e) => setPayloadWeight(e.target.value)}
            InputProps={{
              endAdornment: <InputAdornment sx={{ width: 12 }} position="end">{adornmentLabel}</InputAdornment>,
            }}
          />
          <Button type="submit" variant="contained" sx={{ mt: 3 }}>Submit</Button>
        </FormControl>
      </form>
    </>
  )
}

export default OrderForm

I like this approach more. The above code could result the same behavior as before with one re-render. We have omitted the useState and use standard variable to save the value derived from payloadType. But this approach is not very good because this could lead into performance issue.

By processing a variable directly inside component, for every re-render, the process is executed. ReactJS components always be rendered many times, especially in large scale application. If the process you do is heavy and the component re-rendered many times, than we gonna have serious performance issue.

In order to limit processing variable, we can use useMemo hook. The hook can prevent the processing from happening by saving the result. useMemo also receives dependency array. The dependency array will make sure the process is executed only if array elements are changed.

We can implement it like this,




// ...

function OrderForm() {
  const [payloadType, setPayloadType] = React.useState<string>('kg')
  const [payloadWeight, setPayloadWeight] = React.useState<string>('0')
  // Take a look
  const adornmentLabel = React.useMemo<string>(
    () => payloadType === 'pound' ? 'lb' : 'kg',
    [payloadType]
  )

// ...

useMemo receives two parameter. The first one is the function to process variable value and the second one is dependency array. By using useMemo, the adornmentLabel is changed only if payloadType is changed. We can put heavy process inside the function and it is only executed when elements inside dependency array are changed.

Closing

So that's all from me. What do you think of this approach? Let me know your thoughts :D

If you like my article, make sure to click the ❤️ button.