Skip to content

React Techniques with Performance

Setting up environment:

I prefer using Visual Studio. For React development you can use Simple React Snippet extension in VsCode (Visual Studio). To use this extension facilities like auto suggestion or pre-built snippet you have to save your file as .jsx (eg. MyFile.jsx). Follow the above link to get snippet shortcuts to code faster.

Important: If you are using any secret key / client key in your app, then it’s better not to use them inside your source folder or in index.html file. Because, this can be easily exposed to others. So, what you can do is to add a file with name .env and put your secret/client keys there.

.env file will look like below

CLIENT_KEY = AIzaSyAYdp6JWy6aD-2Jiil3ggePxDSBDIMpD-KF

To use these keys inside you app you have to use process.env.CLIENT_KEY . Don’t forget to add this .env file in .gitignore to avoid sharing these keys in github.

Invoke child function from parent:

We may face situations where we need to invoke a child function from parent. Suppose, we have two components named Parent.jsx and Child.jsx. In our Child component we have a function called triggerChild() which will be invoked from Parent component. Let’s have a look at the files/components below

import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
    childFunction;
  
    setChildFunction = functionRef => {
        this.childFunction = functionRef;
    }
    
    render() {
        return (
          <div>
             <Child setChildFunction={this.setChildFunction}></Child>
            <button onClick={this.childFunction}>Trigger Child</button>
          </div>
        );     
    } 
} 
export default Parent;

First we created a variable called childFunction that would hold the child function passed from Child component throught setChildFunction().
Then we created a function called setChildFunction() which was passed to Child as props.
This setChildFunction() receives a parameter (function) and set  it to childFunction variable which we created earlier.

import React, { Component } from 'react';
class Child extends Component {
  
    triggerChild = () => {
        console.log("child triggered from parent");
    }
    
    componentDidMount() {
        let {setChildFunction} = this.props;
        setChildFunction(this.triggerChild);
    }
    render() {
        return (
          <div>                
            <div>Child</div>
          </div>
       );
    }
}
export default Child;

In this Child component, We passed the  triggerChild function to Parent through setChildFunction when the component is rendered.  That’s why, inside componentDidMount() we grabbed the setChildFunction from props and invoked this function with this.triggerChild paramter which set this triggerChild  function to our parent variable (childFunction). Now, when we nee

Performance Issues:

  1. If any async function that will update the state of component is called anywhere in the component then it must be unsubscribed or destroyed inside componentWillUnmount() function before the component unmounts.

  2. It’s better to use invoke any async function inside componentDidMount(). Because, if async function updates state before the component mounts, this will create an error which is not expected.

  3. If you want to render a list, it’s recommended to use a unique key for each item in the list. Here you might want to use index as key from map of a list. But this will cause performance issue when you want to delete or edit certain item in that list. You can use shortId for generating short unique key.

  4. When rendering a long list it’s better to use infinite scroll or load more mechanism to increase performance. Because, they render items based on user interaction.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *