Understanding Rendering Behavior in React

Rendering is a process that is triggered by a change of state in some component of your application, when a state change occurs.

Deepak Talwar Deepak Talwar
Feb 2, 2022 - 11:41 Updated: Feb 2, 2022 - 11:41
0 22
Understanding Rendering Behavior in React
Rendering in React- thetechfoyer. thetechfoyer.com

This Articles helps you Understanding Rendering Behavior in React

During the rendering process, React will start at the root of the component tree and loop downwards to find all components that have been flagged as needing updates. For each flagged component, React will call either classComponentInstance.render() (for class components) or FunctionComponent() (for function components), and save the render output.


For Rendering, React drill down in the following fashion.

Index.html file (inside public folder) is the first file render by a React Application. Initially React check the root element inside index.html. Anything inside this div is going to be replaced with our REACT application 

<div id="root">div>



index.tsx / index.jsx (inside src folder) - Contains the method that render the content. A a JavaScript line that instruct react to replace everything inside div having id root 
with this App Component. 

ReactDOM.render(<App />,
    document.getElementById("root")
);

Scrict Mode-  can Can Render Root with Scrict Mode. react strict mode- is going to enforce any code that is not compatible or is out of date or has been deprecated in React 17.

ReactDOM.render(
  <React.StrictMode>
    <App />
  React.StrictMode>,
  document.getElementById('root')
);

Can Put App inside another root element, in case of multi-page application

const Root = (props) => {
  return (
    <Fragment>
      <Provider store={store}>
        <Router history={history} basename={`/`}>
          <App />
        Router >
      Provider>
    Fragment>
  )
}
ReactDOM.render(<Root/>,
   document.getElementById('root')
);



app.tsx / app.jsx (inside src folder) - React holds all routes application wide in this file.

import { withRouter} from "react-router-dom";
const App = ({ children }) => {
  return (
    <>
      Define all Routes here ....
    </>
   );
};
export default observer(withRouter(App));



Rendering / Partial Rendering 
React doesn't need to do a full page reloads to go ahead and render what's inside there. And that functionality comes from the tools that we're using here in the background. 
Tools is WEBPACK, that's building and compiling our code and it has the ability to reload our application without actually doing a full page reload.


Render and Commit Phases

  • The "Render phase" contains all the work of rendering components and calculating changes
  • The "Commit phase" is the process of applying those changes to the DOM
    After React has updated the DOM in the commit phase, it updates all refs accordingly to point to the requested DOM nodes and component instances. It then synchronously runs the componentDidMount and componentDidUpdate class lifecycle methods, and the useLayoutEffect hooks.


React then sets a short timeout, and when it expires, runs all the useEffect hooks. This step is also known as the "Passive Effects" phase.

Tags: