----------------------------- app.js import React , { useState , useEffect } from 'react' ; import './App.css' import ComponentC from './ComponentE' ; export const UserContext = React . createContext () export const SalaryContext = React . createContext () const App = () => { return ( <div className = "App" > < UserContext.Provider value = { 'john doe' } > < SalaryContext.Provider value = { "12345" } > < ComponentE /> </ SalaryContext.Provider > </ UserContext.Provider > </div> ); } export default App ; //useEffect runs after every render of component ComponentF.js import React , { useContext } from 'react' import { UserContext , SalaryContext } from './App' function ComponentF () { console . log ( "C F" ) const user = useContext ( UserContext ) const salary = useContex...