React Techniques with Performance

Are you a React developer looking forward to knowing about React Techniques with Performance. Don’t worry. Here, we are going to give you exactly what you’re looking for.

React Techniques with Performance

I prefer using Visual Studio. For React development you can use the Simple React Snippet extension in VsCode (Visual Studio). To use this extension facilities like autosuggestion 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 the index.html file. Because this can easily expose to others. So, what you can do is add a file with the 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 your 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 name triggerChild() which will invoke from the 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 through setChildFunction().
Then we make a function name setChildFunction() which will pass 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 parameter 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 the 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, that is not in your expectation.
   
   
3. If you want to render a list, you can 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 issues when you want to delete or edit certain items in that list. You can use shortId for generating the short unique keys.
   
   
4. When rendering a long list it’s better to use an infinite scroll or load more mechanisms to increase performance. Because they render items based on user interaction.

Our React Products

Gull – React Bootstrap 5 Admin Dashboard Template

Learn more about us HERE.