--- title: "Creating videos with React gets even better" publication: "React Status" issue: 346 published_at: "2023-07-05" canonical_url: "https://react.statuscode.com/issues/346" --- Plus updating state mid-render, Mark Erikson on the future of Redux, and a perf-focused minor Next.js update. | #​346 — July 5, 2023 [Read on the Web](https://react.statuscode.com/issues/346) Together with [![Sentry logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_350,h_100/e_make_transparent/co_white,e_outline:7/xdmchdxkka938lxfr86f.png)](https://sentry.io/resources/ama-debugging-react-native-apps-end-to-end/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=reactnative-fy24q2-workshop&utm_content=newsletter-reactnativeworkshop-register) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/hchzvpeo638scjhswrk0.jpg)](https://www.youtube.com/watch?v=n5FK8_EXcbs) ▶[What's Next For Redux? (with Mark Erikson)](https://www.youtube.com/watch?v=n5FK8_EXcbs) — The king of the React YouTubers takes a break from his usual screencast format to sit down with Redux maintainer Mark Erikson (a.k.a. acemarke) to talk about both the current and future states of Redux and Redux Toolkit, both of which are approaching major new versions. Jack Herrington [Remotion v4.0: A Big Step Forward for React Video Creation](https://www.remotion.dev/blog/4-0) — [Remotion](https://www.remotion.dev/) is a framework for creating videos programatically using React. v4 is such a big update they [▶️ recorded a 6-minute keynote](https://www.youtube.com/watch?v=S3C9wlPNhkQ) to show it off with [more videos to come](https://www.remotion.dev/4) later this week. The Preview function has morphed into [Remotion Studio](https://www.remotion.dev/blog/4-0#introducing-the-remotion-studio) and comes with a range of new features including interactive editing of props, a one-click rendering approach, and a Rust-powered architecture with FFmpeg all bundled in. Jonny Burger [![\](https://copm.s3.amazonaws.com/34cdff09.png)](https://sentry.io/resources/ama-debugging-react-native-apps-end-to-end/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=reactnative-fy24q2-workshop&utm_content=newsletter-reactnativeworkshop-register) [Debugging React Native Apps End-to-End: Best Practices](https://sentry.io/resources/ama-debugging-react-native-apps-end-to-end/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=reactnative-fy24q2-workshop&utm_content=newsletter-reactnativeworkshop-register) — Debugging cross-platform apps can be challenging. Join developers from Meta, Expo and Sentry for a live AMA on Wednesday, July 26th, at 10am PT to learn and share tips and best practices. [Register here](https://sentry.io/resources/ama-debugging-react-native-apps-end-to-end/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=reactnative-fy24q2-workshop&utm_content=newsletter-reactnativeworkshop-register&utm_term=). Sentry sponsor [Breaking Up with SVG-in-JS in 2023](https://kurtextrem.de/posts/svg-in-js) — _“SVGs in JS have a cost and SVGs do not belong into your JS bundle.”_ A look into why you shouldn’t have SVGs in your JS bundle and better techniques for using them from JSX. Jacob Groß **IN BRIEF:** - [Next.js v13.4.8](https://github.com/vercel/next.js/releases/tag/v13.4.8) is a bigger release than its version number lets on, including significant performance improvements to the compiler and HMR / React Fast Refresh, as well as bug fixes. - Did you know that React can [update state while rendering?](https://swizec.com/blog/react-can-update-state-during-render/) Here's [more on how that works](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#setting-state-while-rendering) from Mark Erikson. - 🐝 We're doing a full feature on it in an upcoming issue, but [Wasp](https://wasp-lang.dev/) is worth a look if you'd like a Rails-like framework for React. It uses Node and Prisma behind the scenes. There are many moving parts, but the project has just gone through its latest ['launch week'](https://wasp-lang.dev/blog/2023/06/22/wasp-launch-week-three) and it looks intriguing. - [TypeScript 5.2 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-5-2-beta/) has been released. ▶[The Cost of JavaScript in 2023](https://www.youtube.com/watch?v=ZKH3DLT4BKw) — In just 35-minutes, Web performance expert Addy Osmani covers the various ways JS apps are delivered and rendered, the constraints of the hardware running them, and techniques you can use to keep things running smoothly. Addy Osmani [Some React Performance and Optimization Ideas](https://reacthandbook.dev/react-performance-optimization) — A concise summary of optimization techniques with links to further resources. A representative example of the solid content you’ll find in the [React Handbook](https://reacthandbook.dev). Eric Diviney ▶[Redirecting Unauthenticated Users with Protected Routes in the Next.js 13 App Directory](https://www.youtube.com/watch?v=ywvXGW6P4Gs) — For [Supabase Auth](https://supabase.com/docs/guides/auth) users, specifically. Jon Meyers (Supabase) 📰 Classifieds 💻 Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. [Create a free profile now](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-reactstatus%29&utm_content=find-your-next-job). --- 🐦 If you have any tweets left in your quota, [@CodeWisdom](https://twitter.com/codewisdom) is an account we've been running for years featuring quotes from the greats like Grace Hopper and John Carmack. _Classifieds_ is a new way to share projects, services, or jobs you may find useful. It replaces our old job listings section. We'll share more info on getting your own listings here soon. 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/vuexgaonsepdrwrbdw9m.jpg)](https://react-select.com/home) [React Select: A Flexible Select Input Control](https://react-select.com/home) — Supports things like option groups, portals, animations, multiselect, and autocompletion. Accessible too. There are plenty of examples on the homepage to check out. ([GitHub repo.](https://github.com/JedWatson/react-select)) Jed Watson [HouseForm: Simple-to-Use Field-First React Form Validation](https://houseform.dev/) — Powered by Zod, works in any React supported environment, and boasts faster validation compared to similar solutions. HouseForm [React Authentication — Without Complexity](https://userfront.com/tutorials/react-authentication?&utm_source=react-statuscode-com&utm_medium=newsletter&utm_campaign=sponsored_link&utm_content=react_authentication) — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now. Userfront sponsor [shadcn/ui: Tailwind CSS Components to Copy and Paste](https://ui.shadcn.com/) — If you’re a Tailwind CSS fan, these components will be right up your street. As the creators say: _“This is NOT a component library. It’s a collection of re-usable components that you can copy and paste into your apps.”_ Shadcn [React Native Iconify: Simpler Icons for React Native Apps](https://github.com/oktaysenkan/react-native-iconify) — Provides access to 150,000+ icons. Oktay Şenkan [react-intersection-observer: A Component to Monitor When an Element Enters or Leaves the Viewport](https://github.com/thebuilder/react-intersection-observer) Daniel Schmidt [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/nlcz1dsndx8dywyptnfb.jpg)](https://visgl.github.io/react-map-gl/) - [React Map GL 7.1](https://visgl.github.io/react-map-gl/) ↳ Wrapper for [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/guides/) or [MapLibre GL JS.](https://maplibre.org/) - [react-jsonschema-form 5.9](https://github.com/rjsf-team/react-jsonschema-form) ↳ A component to building forms from a JSON Schema. - [TinyBase 4.0](https://tinybase.org/guides/releases/#v4-0) ↳ Reactive data store for local‑first apps. - [Cross Fetch 4.0](https://github.com/lquixada/cross-fetch) ↳ Universal WHATWG Fetch API for Node, browsers and React Native. - [react-three/xr 5.6](https://github.com/pmndrs/react-xr) ↳ Create VR/AR experiences with [React Three Fiber.](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) - [React Native Image Colors 2.2](https://github.com/osamaqarem/react-native-image-colors) ↳ Fetch prominent colors from an image. This issue was curated by Terence C. Gannon and Peter Cooper and edited by the Cooperpress team. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom