React - General Ideas in React.

[SWS-5007]

Hello, Everyone.
Let's discuss experience of React together here.
Welcome!!!
Thanks.

[SWS-5007]

How to load react web app faster?

To deploy React App, we need to build the app and combine all components and CSS files into minified versions, which convert them into respective bundles!
In React, bundles are generated into two types of files.
The issue is that the bundle size is larger, and the loading speed isn't fast.
You can solve this issue by compressing our bundle.js files, which was the culprit of faster load time.

1. Install following plugin
   npm install compression-webpack-plugin
2. Add plugin to webpack.config.js file
   varCompressionPlugin = require(‘compression-webpack-plugin’);
3. Add this to plugins of webpack.config.js files

plugins:[
...
,newCompressionPlugin()
]

Also, you need to configure gzip on the webserver to start serving bundle.js.gz instead bundle.js
This magically reduce the bundle size.
Thanks.

[yash-saini]

React Lifecycle discussion (function based)

1) ComponentDidMount():- Equivalent in function based react is useEffect hook with empty dependency. The component is rendered only once after being mounted once.
eg:-

useEffect(() => {
  getfromapi()
}, [])

2) ComponentDidUpdate():- the component is Re-rendered after updates to props or states is performed.

const[page,updatepage]=useState(1)

useEffect(() => {
  getfromapi()
}, [page])

In the above example, whenever the value of page state is changed, the component is re-rendered.

3) ComponentWillUnmount():- Called just before the component is unmounted or destroyed.

 useEffect(() => {
    //COMPONENTDIDMOUNT LOGIC
    const timing= setTimeout(() => {
        Spinner_Loading(false)
      }, 2000);
    
   //BEFORE THE COMPONENT IS DESTROYED, THE BELOW IS CODE
    return ()=>{clearTimeout(timing)};
  }, 
    []);

In the above, example as the component mounts, the timing variable comes into picture and just before the component is destroyed, the code written in 'return' statement runs i.e clearing out the timing variable.