CODEWITHSUNDEEP
reactjsperformancereact-hooksreact-functional-componentrerender
Jishnu Raj
Jishnu Raj

Reputation: 41

Is using inline functions in react still a performance trouble?

I've been using React libraries like MUI for quite a while now. Every time I go through their documentation I see that in almost every place they're defining a separate function even performing a very simple single code of state update.

A quick Google search lead me to this StackOverflow question:When to use inline function on button onClick event - Javascript/React.js

But all the code in the question and answers are using class based components. In the case of class based components once an object of the class is created, we can call its render function alone whenever wanted, and hence can re-render only the DOM content for any kind of comparison.

But nowadays everyone's using functional components. In the case of functional components as far as I know if you want to get the value inside the return statement of any JavaScript function, you'll have to call the function. And when you call a JavaScript function no matter whether you write the function definition inline on a DOM element or above the return statement, as long as the function is written inside that component's function, it will get redefined on each and every render.

Someone please correct me if I'm wrong, and put light on this doubt.

Functional component that does not use inline function as Even Handlers:

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

export default function StateTextFields() {
  const [name, setName] = React.useState('Cat in the Hat');
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };

  return (
    <TextField
        id="outlined-uncontrolled"
        label="Uncontrolled"
        defaultValue="foo"
      />
  );
}

Functional component that use inline function as Even Handlers:

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

export default function StateTextFields() {
  const [name, setName] = React.useState('Cat in the Hat');

  return (
    <TextField
        id="outlined-name"
        label="Name"
        value={name}
        onChange={e => setName(e.target.value)}
      />
  );
}

The importance of asking this question will be more clear once you write a huge component which has multiple places where event handlers are used. Writing individual function above return statement and calling them one by one in the JSX can make code quite longer and messy than writing the event handlers of each and every buttons and other input fields on their own JSX code itself.

To understand the flow I've been writing sample codes that uses both the methods.

Event handler using a predefined function:

import React, { useState } from "react";
import Test2 from "./Test2";

const Test = () => {
  const [val, setVal] = useState(0);
  const inc = () => {
    console.log("Hi");
    setVal((val) => val + 1);
  };
  return (
    <>
      <br />
      <button onClick={inc}>Test alone</button>
      {console.log("Rendered")}
      <br />
    </>
  );
};

export default Test;

Event handler using inline function:

import React, { useState } from "react";

const Test2 = () => {
  const [val, setVal] = useState(0);
  return (
    <>
      <button
        onClick={() => {
          console.log("Hi");
          setVal((val) => val + 1);
        }}
      >
        Test 2
      </button>
      {console.log("Rendered from test 2")}
    </>
  );
};

export default Test2;

But nowhere I was able to find any difference (in the performance) but in the second code (inline function) I did find so much ease in writing and understanding the code!

Upvotes: 4

Views: 1230

Answers (1)

tomoyamachi
tomoyamachi

Reputation: 1

As far as I know, inline functions do not cause performance troubles.

The exception is when using React.memo. Inline functions are generated as a different function each time. We can use memo with useCallback to prevent child components from re-rendering even if the parent component is re-rendered. https://react.dev/reference/react/useCallback#skipping-re-rendering-of-components

Upvotes: 0

Related Questions