Posts

What is event.persist();

Event Pooling The  SyntheticEvent  is pooled. This means that the  SyntheticEvent  object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way. If you want to access the event properties in an asynchronous way, you should call  event.persist()  on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code. Cross reference  https://reactjs.org/docs/events.html

Understanding React Virtual DOM

Frequent DOM manipulations are expensive and performance heavy. Virtual DOM is a virtual representation of the real DOM. When state changes occur, the virtual DOM is updated and the previous and current version of virtual DOM is compared. This is called “diffing”. The virtual DOM then sends a batch update to the real DOM to update the UI. React uses virtual DOM to enhance its performance. It uses the observable to detect state and prop changes. React uses an efficient diff algorithm to compare the versions of virtual DOM. It then makes sure that batched updates are sent to the real DOM for repainting or re-rendering of the UI.