We Keep Coding

How do you avoid extra React component renderings when using useEffect hook?

everyone, I am currently working on a React/Electron project and am kind of stumped on how to meet my client's requirements of having less renders when using the useEffect hook. In my current project, I am using a container/component structure so I have my index.js file that contains all the logic for the component and the useEffect in question. The useEffect in the index.js is intended to pre-populate a file input if the file exists, however, this is what is causing the extra render since the component is rendering before the useEffect is finished and then once it is finished the home component then re-renders again with the updated data. So my question is is there a way to have the useEffect finish before home component renders the first time or is this just a part of React that cannot really be changed and my client will have to accept?

useEffect(() => {}, [])
Empty array at the end means this useEffect doesn't have any deps so it will run only once at the beginning.
ref: https://reactjs.org/docs/hooks-reference.html#useeffect (yellow note below)

Wait _app.js loaded then run component on Next.js

I'm using Next.js to develop a website.
I need to use the JavaScript SDK to connect the user login.
I decided to init the SDK in _app.js because I think that It should be the first file the server load.
so I wrote these code in _app.js
componentDidMount () {
window.mySDK = new userInfoSDK()
console.log('_app')
}
and wrote something like this in page.js
async componentDidMount () {
console.log('page')
const loginStatus = await window.mySDK.getInfo()
}
and I get the result is window.mySDK is not defined
The console shows
page
_app.js
so that mean the page.js component is mounted before the _app.js?

According to React lifecycle componentDidMount run after render. Saying that, it means it run the render first and then componentDidMount.
Simple solution:
in _app.js write your code in constructor:
constructor(props) {
super(props)
console.log('_app')
}
You don't need to change anything in page.js.
in this case, the _app run first and then other pages.
the output will be
_app.js
page

ComponentDiDMount is invoked once, only on the client (not on the
server), immediately after the initial rendering occurs. At this point
in the lifecycle, you can access any refs to your children (e.g., to
access the underlying DOM representation). The componentDidMount()
method of child components is invoked before that of parent
components.
I think for your use case you can initialize your SDK on another REACT hook or in constructor to make sure it will be executed before.

React renders unnecessary components

In this simple Create-React-App application , I have a simple, static, Header component. For readability the header is held in a separate component. When using : Dveloper Tools - React - and selecting heighlight updates, I'm surprised to see that the Header component renders each time the destination changes. Of course this happens because the state of the parent, the App component, changes.
It was originally build as a functional component; I tried changing it to a React.pureComponent and React.Component with a 'shouldComponentUpdate' function that returns false but it did not help - the component still gets updated/rendered.
I guess this gets to the 'Virtual Dom' and does not render to the actual dom, but in more complicated apps it is still costly. Any suggestions?
Code
Update
I've forked the original repository to demonstrate the issue. In this example the Header component is build with React.Component and shouldComponentUpdate returns false. Yet the header renders each time the destination changes.
Code

When returning false from the ShouldComponentUpdate method React does not run the render method. I confirmed it by adding a console.log command.
However Chrome’s React extension - heighlight updates - still heiglights the Header. The reason for it might be that Header is a sub-component of the App Component, and since the render method of App runs, the Header is heighlighted.

The simplest solution I can think of is to convert your App component to a simple wrapper component around ControlPanel and presentation. Create a new App component which includes the Header and Footer, along with the wrapper component. Please ensure that the App does not have any state of it's own, to avoid re-renders.

My suggestion is to not worry about it, just keep your render functions as cheap as possible and let React do its work.
If you take care to just pass inn the needed props to any component, keep the components as simple as possible and in a sane structure, and make any expensive calculations outside the simple components (to keep them between state changes), that's all the optimizing I would do.

Currently Header is not a component that can implement shouldComponentUpdate.
Implement Header like this:
import React from 'react'
import '../App.css'
import globeLogo from './globe.svg'
export default class Header extends React.Component{
shouldComponentUpdate(nextProps, nextState) {
//compare props and state if need to and decide whether to render or not
//Other wise just return false;
}
render(){
return (
<div className="App-header">
<img src={globeLogo} className="App-logo" alt="logo" />
<h1>Choose My Next Destination</h1>
</div>
)
}
}
Hope that will resolve your query :)

Call react component from javascript

so i have that big project and everything is on pure javascript like Class.create...prototype and functions that render every component on that page and in render with react.I mean when i type function.createElement("div") somehow it create react div.. and so on and everything is on PURE javascript .. so my question is how can i create file with normal react components and and call that react component from that js file? Thank you

From what I understand from your question is that you need to reuse the react component. For that you need to do two things
Export you react component.You can do it as
module.exports = App;
if your react component is like var App = React.createClass()
Secondly in your other react component where you want to reuse this component you can import it as
import {App} from './path/to/resuable/component';
Now use this component in the render() {} function as <App/>

Reactjs component with changing views

I m actually developping an application using Fluxible and Reactjs.
I need to create inside of this app (already using a router) dynamic subroutes inside of a parent component.
In fact, my component is, globally a planning manager. We can see daily, weekly, monthly etc... tasks.
It means that I have multiple components that can be replaced by each other inside of a parent component which can be .
So I was wondering if we can use something like an "inside component router". I mean this router should work only inside of the concerned component, like changing only the inside components of the parent component Planning.

This looks like a job for react router: https://github.com/rackt/react-router.