--- title: "The interface segregation principle in React" publication: "React Status" issue: 397 published_at: "2024-08-28" canonical_url: "https://react.statuscode.com/issues/397" --- Plus Jack Herrington shares a trick from the React Native world. | #​397 — August 28, 2024 [Read on the Web](https://react.statuscode.com/issues/397) Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/frontend-system-design/?utm_source=email&utm_medium=reactstatus&utm_content=fsd) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ixdsyk3z8nzkcgoo9t8u.jpg)](https://mui.com/blog/material-ui-v6-is-out/) [Material UI v6: The Popular React UI Design/Component System](https://mui.com/blog/material-ui-v6-is-out/) — At almost exactly ten years old, the MUI design system has its latest major release. The enhancements are more evolutionary than revolutionary though, with a focus on improved theming, color scheme management, container query support, and React 19 support. There are also some [revamped templates](https://mui.com/material-ui/getting-started/templates/) to help you get started. García, Bittu, Andai, et al. 💡 If you're on MUI v5, there's [a handy guide for upgrading to v6](https://mui.com/material-ui/migration/upgrade-to-v6/) which the team [suggests](https://www.reddit.com/r/reactjs/comments/1f2d191/material_ui_v6_is_out_now_mui/lk5h880/) _"shouldn't be too bad"_ to do. [Implementing a React-a-Like from Scratch](https://www.rob.directory/blog/react-from-scratch) — While it's unlikely you'll _actually_ want to do this, at least thinking about it can prove instructive as to what’s going on in React’s engine room. Robby Pruzan [![\](https://copm.s3.amazonaws.com/bc3ff0a3.png)](https://frontendmasters.com/courses/frontend-system-design/?utm_source=email&utm_medium=reactstatus&utm_content=fsd) [Front-End System Design](https://frontendmasters.com/courses/frontend-system-design/?utm_source=email&utm_medium=reactstatus&utm_content=fsd) — Learn to create scalable, efficient user interfaces in this extensive video course by Evgennii Ray. Explore the box model, browser rendering, DOM manipulation, state management, performance and much more. Frontend Masters sponsor [The Interface Segregation Principle in React](https://alexkondov.com/interface-segregation-principle-in-react/) — Alex looks at one of the famed [SOLID](https://en.wikipedia.org/wiki/SOLID) object orientation principles and how it can apply to React. Alex Kondov ▶[21 Talks from _Chain React 2024_](https://www.youtube.com/playlist?list=PLE7tQUdRKcyb81ybEVsrk6PfxXu7pJs1i#chainreact2024) — [Chain React](https://chainreactconf.com/) was a React Native conference that took place last month in Portland, Oregon. Catch up with what went on in this playlist, including [building React Native apps for TVs](https://www.youtube.com/watch?v=A3gTZpeoS3I&list=PLE7tQUdRKcyb81ybEVsrk6PfxXu7pJs1i&index=4), how to [optimize React Native performance](https://www.youtube.com/watch?v=TuNHOIAIIR4&list=PLE7tQUdRKcyb81ybEVsrk6PfxXu7pJs1i&index=13), or Jack Herrington showing off [how to build a local-first semantic search system](https://www.youtube.com/watch?v=SUxClOpf9Bo&list=PLE7tQUdRKcyb81ybEVsrk6PfxXu7pJs1i&index=13) inside a React Native app. Chain React 2024 [How to Build a Bluetooth Low Energy-Powered Expo App](https://expo.dev/blog/how-to-build-a-bluetooth-low-energy-powered-expo-app) — [Bluetooth Low Energy](https://www.bluetooth.com/bluetooth-resources/intro-to-bluetooth-low-energy/) is aimed at use cases like healthcare, fitness, beacons, security and home entertainment. Here’s one way to get started. Daniel Friyia (Expo Blog) ▶[Simplified React Web-to-Native Migration with 'use dom'](https://www.youtube.com/watch?v=MKoZTAcVCJU) — Web-to-native migration can seemingly never be made simple enough, which is where Expo’s new, experimental `[use dom](https://docs.expo.dev/guides/dom-components/#)` directive comes in. James Shopland (Jolly Coding) 📄 [Type-Safe Routing with React Router](https://iamsahaj.xyz/blog/typesafe-routing-with-react-router/) – However, [TanStack Router](https://tanstack.com/router/latest) may be a better fit if you want to do this. Sahaj Jain 📺 [A Secret React Native Hack for React Web Devs](https://www.youtube.com/watch?v=81oUBWJQii4) Jack Herrington 📰 Classifieds [[Live Workshop\]](https://sentry.io/resources/extended-tracing-frontend-issues-with-backend-solutions/?utm_medium=paid-community&utm_source=nodeweekly&utm_campaign=fy25q3-tracingworkshop&utm_content=newsletter-tracingworkshop-register) Solve frontend issues with backend solutions: tracing problems through your Next.js stack. 🔍 --- 🚀[Join React Advanced London](https://reactadvanced.com?utm_source=Newsletter&utm_medium=reactstatus) on Oct 25 & 28! 60+ advanced React and Web Dev talks, workshops & networking. Use code [React15](https://reactadvanced.com?utm_source=Newsletter&utm_medium=reactstatus) for 15% off! 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/x4db6ivxiamce71espl1.jpg)](https://codehike.org/blog/v1) [Code Hike 1.0: Turn Markdown into Rich Interactive Experiences](https://codehike.org/blog/v1) — Aimed at use cases like code walkthroughs and interactive docs, [Code Hike](https://codehike.org/) bridges the gap between Markdown and React when creating technical content that takes full advantage of the modern web. Rodrigo Pombo [React Cosmos v6.2: A Sandbox for Developing and Testing UI Components](https://reactcosmos.org/) — Built upon a project first showcased at ReactEurope 2015, Cosmos is a long standing and ‘slowly matured’ tool for prototyping React components in an isolated manner. Ovidiu Cherecheș et al. [Snaptail: One File React Apps](https://snaptail.dev/) — If you’re still feeling a little overwhelmed by React, here’s how to build an app by manipulating **just one file**. Sandro Rybarik [uikit 0.5: Build 3D UIs in React-Three-Fiber Apps](https://pmndrs.github.io/uikit/docs/getting-started/introduction) — Ideal for games, XR (VR/AR), and web-based spatial-style apps. [GitHub repo.](https://github.com/pmndrs/uikit) Bela Bohlender 🕒 [Time Picker: A `shadcn/ui`-Based Date/Time Picker Component](https://time.openstatus.dev/) OpenStatus - [React Stripe 2.8](https://github.com/stripe/react-stripe-js) – React components for Stripe.js and Stripe Elements. - [react-native-MMKV 3.0](https://github.com/mrousavy/react-native-mmkv) – Fast key/value storage for React Native apps. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/eqotpsgybbqcu7dfuzmk.jpg)](https://viewer.textea.io/) - [json-viewer 3.5](https://viewer.textea.io/) – Display JSON data in a readable, user-friendly way _(above)_. - [VisionCamera 4.5.2](https://github.com/mrousavy/react-native-vision-camera) – Advanced camera control for React Native. - [React Suite 5.70](https://github.com/rsuite/rsuite/releases/tag/v5.70.0) – A suite of React components. ([Examples.](https://rsuitejs.com/components/overview/)) Curated by Peter Cooper and Terence C. Gannon. 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