5 Best Practices for your next React app

1) Avoid inline function definition in the JSX

Inline functions are slow because they will create an instance of function on each render if it's used in jsx. This might create a lot of work for the garbage collector.

When React does the virtual DOM diffing, it finds a new function instance each time, so during the rendering phase, it binds the new function and leaves the old instance for garbage collection.

so directly binding inline function is a bad approach because it leads to extra work for the garbage collector and new function binding to the dom on every render

Below is an example of an inline function :

import React, { useState } from 'react';

const App = () => {
  const [name, setName] = useState('');

  return (
    <div>
      <h1>Inline function example</h1>
      <input
        type='text'
        name='name'
        id='name'
        placeholder='Enter your name'
        onChange={(e) => setName(e.target.value)}
      />
      <h5>Name : {name}</h5>
    </div>
  );
};

export default App;

In the above code, every time the app is rendered, a new instance of the function is created.

Also, the last function instance is available for garbage collection, thus increasing a lot of effort for react application.

Instead of defining an inline function, you can create a function inside the component instead and bind the event to that function itself.

For reference, see the code below :

import React, { useState } from 'react';

const App = () => {
  const [name, setName] = useState('');

  const inputHandler = (e) => {
    setName(e.target.value);
  };

  return (
    <div>
      <h1>Avoiding inline function</h1>
      <input
        type='text'
        name='name'
        id='name'
        placeholder='Enter your name'
        onChange={inputHandler}
      />
      <h5>Name : {name}</h5>
    </div>
  );
};

export default App;

2) Lazy loading

Lazy loading has become one of the optimization technique which speed up the load time of apps.

To lazy load route components in React, the React.lazy() API is used.

React.lazy makes it easy to create components and render them using dynamic imports. React.lazy takes a function as a parameter:

React.lazy (()=>{})

The React.lazy returns a Promise via the import() call. The Promise resolves if the module loads successfully and rejects if there was an error in loading the module, due to network failure, wrong path resolution, no file found, etc.

import React from 'react'
import OtherComponent from './OtherComponent'

// Without React.lazy()

const App = () => {
    return (
        <div>
            <OtherComponent/>
        </div>
    )
}

export default App

// Without React.lazy()

import OtherComponent = React.lazy(()=>import('./OtherComponent'))

const App = () => {
    return (
        <div>
            <OtherComponent/>
        </div>
    )
}

export default App

3) Avoid using inline-style

The browser spends a lot more time to rendering and scripting.

The browser has to map all the style rules passed to the actual CSS properties, which increases the rendering time for the component.

import React from 'react'

const App = () => {
    return (
        <div>
            <h1 style={{color:'black'}}>React is Awesome</h1>
        </div>
    )
}

export default App

We have inline style in the above code. The inline style added a javascript object instead of a style tag.

The style color needs to be converted into an equivalent CSS style property and then the style will be applied.

The better approach is to used external styles and import the CSS files into components.

4) Avoid using Index value as Key for map function

When we need to render a list of items, we should add a key for the items.

Keys help in identifying the items that have been changed, added, or deleted. A key should be unique for each item in the list.

import React from 'react';

const users = [
  {
    name: 'shubham',
    age: 21,
  },
  {
    name: 'khunt',
    age: 22,
  },
  {
    name: 'ankit',
    age: 23,
  },
];

const App = () => {
  return (
    <div>
      {users.map((user, index) => (
        <div key={index}>
          <p>{user.name}</p>
          <p>{user.age}</p>
        </div>
      ))}
    </div>
  );
};

export default App;

It's always better to use a unique property as a key, or if your data doesn't have any unique attributes, then you can think of using the nanoid module which generates a unique key.

import React from 'react';
import { nanoid } from 'nanoid'

const users = [
  {
    name: 'shubham',
    age: 21,
  },
  {
    name: 'khunt',
    age: 22,
  },
  {
    name: 'ankit',
    age: 23,
  },
];

const App = () => {
  return (
    <div>
      {users.map((user) => (
        <div key={nanoid()}>
          <p>{user.name}</p>
          <p>{user.age}</p>
        </div>
      ))}
    </div>
  );
};

export default App;

5) Avoid spreading properties into a DOM element

avoid spreading properties into a DOM element as it adds unknown HTML attributes or unused props, which is unnecessary and bad practice.

import React from 'react';
import ChildComponent from './ChildComponent';

const App = (props) => {
  return (
    <div>
      <ChildComponent {...props} />
    </div>
  );
};

export default App;

Instead of spreading props, you can set specific attributes:

import React from 'react';
import ChildComponent from './ChildComponent';

const App = (props) => {
  return (
    <div>
      <ChildComponent specificAttribute={props.specificAttribute} />
    </div>
  );
};

export default App;