{"id":8585,"date":"2019-09-23T11:22:33","date_gmt":"2019-09-23T11:22:33","guid":{"rendered":"https:\/\/ui-lib.com\/?p=8585"},"modified":"2022-06-19T08:10:12","modified_gmt":"2022-06-19T08:10:12","slug":"react-techniques-with-performance","status":"publish","type":"post","link":"https:\/\/ui-lib.com\/blog\/react-techniques-with-performance\/","title":{"rendered":"React Techniques with Performance"},"content":{"rendered":"\n

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. <\/p>\n\n\n\n

React Techniques with Performance<\/h2>\n\n\n\n

I prefer using Visual Studio<\/a>. For React development you can use the Simple React Snippet<\/a> extension in VsCode (Visual Studio). To use this extension facilities like autosuggestion or pre-built snippet you have to save your file as .jsx<\/em><\/strong> (eg. MyFile.jsx<\/em><\/strong>). Follow the above link to get snippet shortcuts to code faster.<\/p>\n\n\n\n

Important:<\/strong> 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<\/em><\/strong> and put your secret\/client keys there. <\/p>\n\n\n\n

.env<\/em><\/strong> file will look like below<\/p>\n\n\n\n

CLIENT_KEY = AIzaSyAYdp6JWy6aD-2Jiil3ggePxDSBDIMpD-KF<\/pre><\/div>\n\n\n\n
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.<\/p>\n\n\n\n
Invoke child function from parent:<\/h2>\n\n\n\n
We may face situations where we need to invoke a child function from parent. Suppose, we have two components named Parent.jsx<\/em> <\/strong>and Child.jsx<\/strong><\/em>. In our Child<\/strong> <\/em>component, we have a function name triggerChild()<\/strong><\/em> which will invoke from the Parent<\/strong> <\/em>component. Let’s have a look at the files\/components below<\/p>\n\n\n\n
import React, { Component } from 'react';\nimport Child from '.\/Child';\nclass Parent extends Component {\n    childFunction;\n  \n    setChildFunction = functionRef => {\n        this.childFunction = functionRef;\n    }\n    \n    render() {\n        return (\n          <div>\n             <Child setChildFunction={this.setChildFunction}><\/Child>\n            <button onClick={this.childFunction}>Trigger Child<\/button>\n          <\/div>\n        );     \n    } \n} \nexport default Parent;<\/pre><\/div>\n\n\n\n
First we created a variable called childFunction<\/strong> <\/em>that would hold the child function passed from Child<\/em><\/strong> component through setChildFunction<\/strong><\/em>().<\/em><\/strong>
Then we make a function name setChildFunction()<\/strong><\/em> which will pass to Child<\/strong> <\/em>as props.
This setChildFunction()<\/strong><\/em> receives a parameter (function) and set  it to childFunction<\/strong> <\/em>variable which we created earlier.<\/p>\n\n\n\n
import React, { Component } from 'react';\nclass Child extends Component {\n  \n    triggerChild = () => {\n        console.log(\"child triggered from parent\");\n    }\n    \n    componentDidMount() {\n        let {setChildFunction} = this.props;\n        setChildFunction(this.triggerChild);\n    }\n    render() {\n        return (\n          <div>                \n            <div>Child<\/div>\n          <\/div>\n       );\n    }\n}\nexport default Child;<\/pre><\/div>\n\n\n\n
In this Child<\/strong> <\/em>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<\/strong> <\/em>function to our parent variable (childFunction).<\/strong><\/em> Now, when we nee<\/p>\n\n\n\n
Performance Issues:<\/h2>\n\n\n\n
  1. If any async<\/em><\/strong> function that will update the state of the component is called anywhere in the component then it must be unsubscribed or destroyed inside componentWillUnmount()<\/em><\/strong> function before the component unmounts.  

    <\/li>
  2. It’s better to use invoke any async<\/em><\/strong> function inside componentDidMount()<\/em><\/strong>. Because, if async function updates state before the component mounts, this will create an error, that is not in your expectation.

    <\/li>
  3. If you want to render a list, you can use a unique key <\/em><\/strong>for each item in the list. Here you might want to use index<\/em><\/strong> as key<\/em><\/strong> from map<\/em><\/strong> 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<\/strong> for generating the short unique keys.

    <\/li>
  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.<\/li><\/ol>\n\n\n\n
    Our React Products<\/h2>\n\n\n\n
    \nhttps:\/\/ui-lib.com\/downloads\/bazar-pro-react-nextjs-ecommerce-template\/\n<\/div><\/figure>\n\n\n\n
    \n
    MatX Pro – React Admin Template<\/a><\/blockquote>