Pravin Varma

import React,{useMemo,useState} from "react";
import "./style.css";

export default function App() {
    const [state, setState] = useState(0);
    for(let i=1;i<10;i++){
        let a=1;
        let b = 1;
        console.log(useMemo(()=> {console.log('invoked');return a+b},[a,b]))
    }
    const callMe=()=>{
        setState(prevState=>prevState+1)
    }
    return (
        <div>
            <h1>Hello StackBlitz!</h1>
            <p onClick={callMe}>Start editing to see some magic happen :)</p>
        </div>
    );
}

React component renders every time it’s state changes. In the above example without useMemo the message will be printed(along with value 2) when we click on the message(I know it’s wrong to have onclick on paragraph) nine times.

If we put useMemo in place then the message wont be printed. Instead, memoized value will be presented on the screen(which is 2; nine times!)

componentDidMount

 useEffect(() => {
  // will run on every render
});

 useEffect(() => {
// will run on first render
},[]);

componentDidUpdate

useEffect(() => {
  // will run on first render and when the dependency changes
}, [dependency]);

https://stackblitz.com/edit/react-p5g8wx?file=src/App.js

This is the parent component

import React,{useEffect, useState} from 'react';
import './style.css';
import Child1 from './child1';

export default function App() {
    const [change, setChange] = useState(0);
    const onChange = (e)=>{
        setChange(e.target.value)
    }
    return (
        <div>
            <h1>Hello StackBlitz!</h1>
            <Child1 change={change}/>
            <input type="text" onChange={onChange} value={change} />
            <p>Start editing to see some magic happen :)</p>
            {change}
        </div>
    );
}

The child component

import React, { useEffect, useState } from 'react';
const  Child1 = React.memo((props)=> {
    useEffect(() => {
        console.log('child Update');
    }, [props.change]);
    return (
        <div>
            <h1>Child1</h1>
            {props.change}
        </div>
    );
},(PrevProps, NextProps)=>{PrevProps.change === NextProps.change})
export default Child1

Using React.memo, you can pass first argument as component and second argument as a function which can have two argument PrevProps and NextProps which you can use to compare the change. If the comparison returns true, then the child won’t re-render.

When you overwrite the previous value by copy pasting, it does not re-renders the component i.e. it does not trigger useEffect!

https://react-childupdate.stackblitz.io/