Skip to content

Latest commit

 

History

History
25 lines (21 loc) · 962 Bytes

README.md

File metadata and controls

25 lines (21 loc) · 962 Bytes
Raw

React Context Demo

  • Prop Drilling

  • React Hooks

  • Context API

  • Context Providers

  • Shared State

  • Interface vs Implementation Functions !!

  • Simple Auth / Login App

  • Demonstrates Context Providers and useContext

  • accepts any username / email address & password

  • creates a dummy userId for the newly logged in user

  • sets auth state if logged in and shows User Info if auth=true

  • uses CounterProvider component to wrap <Info> and <Login> in Appjs

  • uses AuthProvider component to wrap <App> in index.js

  • Do not share "interface" functions: setCounter(), setUser().

  • Only share "implementation" functions: increment(), clear(), login()

  • Can share state primitives, just don't share their setState functions

  • Its generally "OK" to share more complex state objects eg user

  • Sharing a function is better: isloggedIn(), getUserName()

  • Avoid deeply nested State. eg: No state object

  • Keep your state as flat as possible