UseEffect - Exercises

Render only once using UseEffect

import { useEffect, useState } from "react";

function Input(){

    const[name,setName] = useState('')

    useEffect(()=>console.log("Component Mounted"),[]);



    return(
    <>
      <input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input>
        <p>Hi! Welcome {name}</p>
        </>

    )

}

export default Input

Output:

Note:
React is running in Strict Mode during development
React intentionally mounts, unmounts, and remounts components once in development to detect side effects. Because of that, it is printed twice in console, this happens only in development mode but in production build, it runs once

Render Every time using UseEffect

import { useEffect, useState } from "react";

function Input(){

    const[name,setName] = useState('')

    useEffect(()=>console.log("Component Mounted"));



    return(
    <>
      <input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input>
        <p>Hi! Welcome {name}</p>
        </>

    )

}

export default Input

Output:

Render Only when State changes using UseEffect

import { useEffect, useState } from "react";

function Input(){

    const[name,setName] = useState('')

    useEffect(()=>console.log("Component Mounted"),[name]);



    return(
    <>
      <input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input>
        <p>Hi! Welcome {name}</p>
        </>

    )

}

export default Input

Output:

Note:
State Variable name is updated 4 times so the useEffect re-rendered 4 times the call back function

Two States and One Effect
Effect runs when count or name is changed

import { useEffect, useState } from "react";

function Input(){

    const[name,setName] = useState('')
    const[count,setCount]=useState(0)

    useEffect(()=>console.log("Component Mounted"),[name,count]);



    return(
    <>
      <input value={name} type="text" onChange={(e)=>{setName(e.target.value)
       }
      }></input>
      <button value={count} onClick={(e)=>{
        setCount(count+1)}
      }>+</button>
        <p>Hi! Welcome {name} and  Count {count}</p>
        </>

    )

}

export default Input

Output

Note:
State variable name is updated thrice and so effect ran thrice
State variable count is updated thrice and so effect ran thrice for it as well

*Show Even only when count becomes Even *

import { useEffect, useState } from "react";

function Input(){

    const[name,setName] = useState('')
    const[count,setCount]=useState(0)

    useEffect(()=>{
      if(count%2===0){
        console.log("even")
      }
    },[count]);



    return(
    <>
      <input value={name} type="text" onChange={(e)=>{setName(e.target.value)
       }
      }></input>
      <button value={count} onClick={(e)=>{
        setCount(count+1)}
      }>+</button>
        <p>Hi! Welcome {name} and  Count {count}</p>
        </>

    )

}

export default Input

Output

Note:
count is incermented 16 times and even is printed on console only 8 times for even counts only