Advanced React

 1 Use State while using in object should be approached like this;      export   default   function   App () {     const  [greeting, setGreeting] = useState({ greet:  "Hello, World"  });    console.log(greeting, setGreeting);       function  updateGreeting() {       const  newGreeting = {...greeting};      newGreeting.greet =  "Hello, World-Wide Web" ;      setGreeting(newGreeting);    }   Here, the newGreeting takes all the previous objects then manipulates the greet so that only greet is modified and not other object. 2 Another way is using prevState; export   default   function   App () {     const  [greeting, setGreeting] = useState(    ...

 1 We use context API to provide context which is available to all the components of the App directly. 2 We use a Context Provider that wraps the App.js which means it wraps the whole components. So that the context can be made available to all the components. check link:   https://youtu.be/aAcI_FdfkA8 Eg: In UserContext file located in context in src of React Practises; Create a constant which assigns to React,createContext. Create a file named Context Provider that provides the context to the Usercontext Syntax of Context Provider: import React , { useState } from "react" ; import UserContext from "./UserContext" ; const UserContextProvider = ({ children }) => {   const [ user , setUser ] = useState ( null );   return (     < UserContext.Provider >         { children }     </ UserContext.Provider >   ) }; export default UserContextProvider ;