MENU

Fun & Interesting

STOP using useState, instead put state in URL (in React & Next.js)

ByteGrad 239,432 2 years ago
Video Not Working? Fix It Now

πŸ‘‰ NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). πŸ‘‰ Add auth to your app FAST: https://bit.ly/3QOe1Bh πŸ‘‰ NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs πŸ‘‰ Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript πŸ‘‰ Professional CSS Course: https://bytegrad.com/courses/professional-css πŸ‘‰ Discord: all my courses have a private Discord where I actively participate πŸ”” Email newsletter (BIG update soon): https://email.bytegrad.com ⏱️ Timestamps: 0:00 Examples 0:41 Benefits 2:38 Example overview 4:24 useState 6:56 Synchronize URL with useEffect 7:30 History API 7:54 Query string definitions 8:58 Next.js useRouter 10:20 location.search 11:18 Problems with useState approach 11:58 Switch to URL for state 12:26 useSearchParams 13:35 Link component 16:11 Server component (searchParams) 17:13 Caveat 1: replace vs push 17:57 Caveat 2: unknown values 18:18 Caveat 3: no values 18:32 Caveat 4: url-encoded values (URLSearchParams) 20:47 Real-world use cases #webdevelopment #programming #coding Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code. This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 . . TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)

Comment