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
Anything inside this div is going to be replaced with our REACT application
2. src > index.tsx / index.jsx
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
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
3. src > app.tsx / app.jsx
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.
