Advanced animations with Framer Motion, Suspense is killing me, and Incremental Static Regeneration with Next.js
This week’s issue is sponsored by Appsmith.
Appsmith is an open-source internal app builder that lets you build CRUD on top of any datasource (Database, API, Google Sheets, Airtable, etc) really fast. Just code your logic, and they handle the rest, so you can spend your time doing stuff that matters. You can self-host or use appsmith cloud for free!
👉 Check out one of their free demos here.
Maxime Heckel got a lot of love for his previous article on creating basic animations with Framer Motion, so he wrote this piece to cover some of the more advanced animations you can make with Framer Motion. Ever wondered how to propagate animations throughout several components, or how to orchestrate complex layout transitions? This article's got you covered.
If you're a longtime React user, you might (still) be wondering when Concurrent Mode/Suspense will ship. Fatih Altınok doesn't have the answers about when it'll happen, but he wrote this article to give an overview of the Concurrent Mode/Suspense timeline so far and to go over some key terms and proposed features. At the very least, it'll help you feel more informed about exactly what we're all waiting for and how it got to this point.
In this continually updated article, Max Rozen writes about various helpful libraries that he thinks are worth highlighting.
Adam Wathan wrote about the behind-the-scenes efforts that have gone into making it possible for Tailwind UI to support React and Vue.
In this tutorial, Lee Robinson (from the Vercel/Next.js team) explores a new evolution of the Jamstack: Incremental Static Regeneration (ISR), which allows you to update static content instantly without needing a full rebuild of your site. He goes over the use cases, demos, and tradeoffs of this approach and shows how you can use Next.js to make it a little easier.
Eugene Stepnov shares some helpful info on how to choose a react table, what difficulties you might encounter during the development of a react table, and other tips that'll help you create useful react tables. He also made a small guide on building a react table based on the most popular react-table library.
In this article Tyler walks through React's useReducer Hook from a first principles perspective.
A React Hook to cancel promises when a component is unmounted. It uses the W3C-standard AbortSignal API to notify compatible promises when the calling component is unmounted.
If you've run out of ways to lose money on crypto, this React + Web Sockets app is a fun way to automate crypto day trading on Binance. Just be sure to lever up to 100x before you start using it 👹 (just kidding, please don't use this).
In this 45-minute video, Sanjeev Thiyagarajan promises to teach you everything there is to know about the useEffect hook. He shows how it works under the hood and some of the common use cases for it. He covers the reasons for why we have a dependency array and goes over how we can imitate the behvaior of ComponentDidMount/ComponentDidUpdate/ComponentWillUnmount.
By the end of this 15-minute video you'll know how to setup Google OAuth login for an application and have a general idea of the source code used to create this Spring Boot with React App.
By the end of this 15-minute video you'll know how to setup Google OAuth login for an application and have a general idea of the source code used to create this Spring Boot with React App.