Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Revisiting x State x Management.pdf
Similar to Revisiting x State x Management.pdf (20)
Recently uploaded
Recently uploaded (20)
Revisiting x State x Management.pdf
- 1. @YourTwitterHandle Your blog / Website YOUR NAME Mohamed EL AYADI @incepterr
- 3. React A JavaScript library A UI runtime that run components
- 4. React A JavaScript library A UI runtime that run components A set of packages and renderers of different hosts environments
- 5. whoami Mohamed EL AYADI Senior software engineer with a decade of experience Java & JavaScript ecosystems @incepter @incepterr
- 6. Plan What x Is x State ? State crimes x And x State police State x Management x Aspects Conclusion x And x Takeaways
- 7. What x Is x State ? • It is the internal memory of a react component • State setter is the only trigger of the update phase in react • OK, may be useSyncExternalStore also, but not trivial • Some states need to be shared in a tree • Shared by prop drilling or wired via context Api. • Asynchronous states update state later.
- 8. State crimes x And x State police • Cannot update state of unmounted component • Showing results of earlier request • No cancellations • No pending states • Poor error handling • Useless useEffects • Flashing old state • No sharing • The list doesn’t end here…
- 9. State crimes x And x State police • Cannot update state of unmounted component
- 10. State crimes x And x State police • Cannot update state of unmounted component
- 11. State crimes x And x State police • Cannot update state of unmounted component
- 12. State crimes x And x State police • Problems with this code • The loading state isn’t a Boolean • Three pieces of states working and updated together • Counting rather than a Boolean semaphore • Doesn’t abort the previous call
- 13. State crimes x And x State police • Cannot update state of unmounted component
- 14. State crimes x And x State police • Cannot update state of unmounted component
- 15. State crimes x And x State police • Cannot update state of unmounted component
- 16. State crimes x And x State police • Showing results of earlier request
- 17. State crimes x And x State police • Showing results of earlier request
- 18. State crimes x And x State police • No cancellations • AbortController
- 19. State crimes x And x State police • No cancellations
- 20. State crimes x And x State police • No cancellations
- 21. State crimes x And x State police • No cancellations
- 22. State crimes x And x State police • No cancellations
- 23. State crimes x And x State police • No pending states
- 24. State crimes x And x State police • No pending states • Exact status • The data relative to the status • The date at which this piece of state was constructed • The props that led to that state outcome, may be used for optimistic UI.
- 25. State crimes x And x State police • Poor error handlig
- 26. State crimes x And x State police • Useless effects • Could be done in event handlers • Only to reset state from props • Effects are only for synchronization and subscription
- 27. State crimes x And x State police • Useless effects • Could be done in event handlers • Only to reset state from props • Effects are only for synchronization and subscription
- 28. State crimes x And x State police • Useless effects • Could be done in event handlers • Only to reset state from props • Effects are only for synchronization and subscription
- 29. State crimes x And x State police • Flashing old state • Previous state shows for few Millis and then we start a pending state (if lucky enough!)
- 30. State crimes x And x State police • Manipulating refs and using state to re-render • The list doesn’t end here…
- 31. State crimes x And x State police • Linters provide great help to follow the rules of hooks • Rules of hooks • Exhaustive deps • … • Blog posts and tutorials try their maximum to share good practices • Dan’s overreacted blog • Kent’s blogs and learning material • Community libraries makes our life easier • UI libraries • State managers • XState • State managers leverage the complexity but create bad habits. • React Strict Mode
- 32. State x Management x Aspects • Sharing • Subscriptions • Asynchronous flows • Cancellations • Forks • Effects: debounce, throttle, delay… • Caching (with/without persistence) • React/root independent
- 33. • Sharing State x Management x Aspects
- 34. • Subscriptions State x Management x Aspects
- 35. • Subscriptions State x Management x Aspects
- 36. • Asynchronous flows State x Management x Aspects
- 37. • Cancellations • Generators support • Async/await support via isAborted • Abort callbacks registration and invalidation State x Management x Aspects
- 38. • Forks • Replicate behavior for a new tree State x Management x Aspects
- 39. • Effects: debounce, throttle, delay… State x Management x Aspects
- 40. • Caching (with/without persistence) • Invalidate and refetch when timed-out • Only invalidate when requested and state State x Management x Aspects
- 41. • React/root independent State x Management x Aspects
- 42. State x Management x Aspects
- 43. State x Management x Aspects
- 44. Conclusion x And x Takeaways • State is the only trigger of updates in react (re-renders). Ok, useSES! • State setter must be secured from old and stale closures, not only unmount. • If React.useCallback could just invalidate the previous callback when deps change! • Status is mandatory when dealing with asynchronous states • useEffect should not be abused and events should perform more work • State managers offers great help dealing with state • Community resources are a gem that should be considered more • We are all state criminals