-
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
authstate if logged in and shows User Info if auth=true -
uses
CounterProvidercomponent to wrap<Info>and<Login> inAppjs -
uses
AuthProvidercomponent to wrap<App>inindex.js -
Do not share "implementation" functions:
setCounter(), setUser(). -
Only share "interface" functions:
increment(), clear(), login() -
Can share state primitives, just don't share their
setStatefunctions -
Its generally "OK" to share more complex state objects eg
user -
Sharing a function is better:
isloggedIn(), getUserName() -
Avoid deeply nested State. eg: No
stateobject -
Keep your state as flat as possible