React Concepts

Few Questions and Answers on the concept of REACT for my own references

Render and Re-render

• How do react update the real DOM?

React uses react DOM library to update the actual DOM. It uses browser’s DOM api like getElementById etc to do the actual update.

• What is the use of React-DOM library?

The react-dom library is a specific part of the larger React ecosystem and serves a crucial role in rendering React components to the actual DOM (Document Object Model) of a web page.

React just creates the virtual in memory DOM, which is not part of the browser’s DOM.

The react-dom library bridges the gap between the Virtual DOM and the real DOM.

• How does react-dom library update the real DOM?

React-Dom provides method like ReactDOM.render() which takes a react component and html element where the component needs to render.

• What happens when you call setState to update the state?

React schedules the re-render of the component with the new updated state. It doesn’t immediately update the state or trigger a DOM update; instead, it queues the update to be applied later.

• What triggers re-render and what happens during re-render?

Change in props or state tirggers re-render. But this is not done immediately, rather every update is batched and processed only once.

• When Does It Actually Re-Render?

React re-renders the component when it completes processing the current event loop, and before entering the browser’s painting phase. At the point, react performs operations of. both the render phase and the commit phase.

Preserving and Clearing States

• Where are states stored in react?

Contrary to what it looks like, react doesn’t store the state value in component, rather it’s maintained in the react tree, which is the representation of the DOM.

• Example of react preserving state even when it’s not suppose to

export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? (
        <Counter isFancy={true} /> 
      ) : (
        <Counter isFancy={false} /> 
      )}
      <label>
....
}

In the above code, the counter is always considered as same component by react and it’s state is always preserved regardless of the update in isFancy state in the parent. This is because the position of the <Counter/> is never changed.

• How can this be corrected?

This can be corrected by wrapping one of the counter component in some element so that the position is changed during re-rende or by providing a unique key.

{isFancy && 
        <Counter isFancy={true} /> }
{!isFancy && 
        <Counter isFancy={false} /> }

• What happens when we have two different components at the same position? (conditional rendered)

As per the previous explanation, when you switch between two different components at the same position, the state is lost.

<div>
      {isFancy ? (
        <p>This is fancy</p> 
      ) : (
        <Counter isFancy={false} /> 
      )}
 </div>

As a rule of thumb, if you want to preserve the state between re-renders, the structure of your tree needs to “match up” from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree.