Fixing a React navigation bug
Watch me and Ryan refactor a real-world codebase! We animate a slideover on back navigation, maintain scroll position when the slideover opens, and ensure a clean initial render based on the URL query params. PR with refactor: https://github.com/samselikoff/2023-09-16-directory-demo-app/pull/1 Original tweet + demo: https://twitter.com/rthaut/status/1702182717008629936 TIMESTAMPS: 0:00 - Intro 1:31 - App overview 4:48 - First look at code 11:06 - Keeping the SlideOver rendered 14:33 - Removing the Effect for derived state 23:40 - Fixing the initial render 32:05 - Fixing the close button 40:10 - Fixing the scroll position 48:29 - Preserving the panel contents during unmount animation 53:38 - Outro
Watch me and Ryan refactor a real-world codebase! We animate a slideover on back navigation, maintain scroll position when the slideover opens, and ensure a clean initial render based on the URL query params. PR with refactor: https://github.com/samselikoff/2023-09-16-directory-demo-app/pull/1 Original tweet + demo: https://twitter.com/rthaut/status/1702182717008629936 TIMESTAMPS: 0:00 - Intro 1:31 - App overview 4:48 - First look at code 11:06 - Keeping the SlideOver rendered 14:33 - Removing the Effect for derived state 23:40 - Fixing the initial render 32:05 - Fixing the close button 40:10 - Fixing the scroll position 48:29 - Preserving the panel contents during unmount animation 53:38 - Outro