3. React Basics

• With every setState render will be called.
• On prop change re-render happens.
• constructor is called before render.
• Monsters Rolodex

import './index.css';
 
<React.StrictMode>
 

In React 18 they have started doing double invocation for certain things in a component lifecycle.

import { Component } from 'react';
const { monsters } = this.props;
 
<input onChange={() => {
	// this input is a react component, react places a onChange property on that
}}
 
<input onChange={this.props.changeHandler} />
 
<CardList monsters={['Monster One']}

name React Lifecycle Methods
type link
action https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

DOM vsvirtual_DOM

• diffing
• batching

Virtual DOM updates only nodes that are updated.

react_DOM

react_DOM does the job of converting react to DOM elements, similarly,react_native converts the DOM to native elements. Go to source code.

Create index.html to see working of react andreact_DOM

DOM Paint Flashing

Enable in browser dev tools settings: