React JS

Understanding Rendering Behavior in React

Understanding Rendering Behavior in React

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.

React Rendering Process 

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.


1. public folder > Index.html file This is the first file render by a React Application. Initially React check the root element inside index.html

<div id="root"></div>

Anything inside this div is going to be replaced with our REACT application  

2. src > index.tsx / index.jsx

ReactDOM.render(<App />,

A method to render the content. A a JavaScript line that instruct react to replace everything inside div having id root with App Component. Can Render Root inside Scrict Mode

    <App />

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.   Can Put App inside another root element, in case of multi-page application

const Root = (props) => {
  return (
      <Provider store={store}>
        <Router history={history} basename={`/`}>
          <App />
        </Router >

3. src > app.tsx / app.jsx

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

Rendering / Partial Rendering It 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.

Related Post

About Us

Community of IT Professionals

A Complete IT knowledgebase for any kind of Software Language, Development, Programming, Coding, Designing, Networking, Hardware and Digital Marketing.