--- title: "The one all about useSyncExternalStore" publication: "React Status" issue: 305 published_at: "2022-09-14" canonical_url: "https://react.statuscode.com/issues/305" --- Plus is Create React App 'outdated', Kent C Dodds hits the road, and mixed signals from Preact. | #​305 — September 14, 2022 [Read on the Web](https://react.statuscode.com/issues/305) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/kaqzwvgzorupgofit5ef.jpg)](https://www.youtube.com/watch?v=GMeQ51MCegI) ▶['React 18's New State Hook You've Never Heard About'](https://www.youtube.com/watch?v=GMeQ51MCegI) — We know videos are a hard sell, but Jack is at the top of his game right now, and this one has had rave reviews. It covers `useSyncExternalStore` from start to finish with a practical example and is well worth the watch. If you _don’t_ like videos, the next item covers the same hook in written form. Jack Herrington [useSyncExternalStore: The Underrated React API](https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api) — [useSyncExternalStore](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore) (also featured above) is a hook for subscribing to external data sources. But did you know it can also be used to stop [over-returning](https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api#over-returning-hooks) React hooks triggering needless re-renders? Sébastien Lorber [![\](https://copm.s3.amazonaws.com/9b05ed69.jpg)](https://FrontendMasters.com/sale/?utm_source=reactstatus&utm_medium=email&utm_content=sale) [Frontend Masters Community Sale](https://FrontendMasters.com/sale/?utm_source=reactstatus&utm_medium=email&utm_content=sale) — Celebrate new community features with $100 off a yearly membership – our first discount in over 3 years! [See details](https://FrontendMasters.com/sale/?utm_source=reactstatus&utm_medium=email&utm_content=sale). Frontend Masters sponsor [Why Every React Developer Should Learn Function Composition](https://medium.com/javascript-scene/why-every-react-developer-should-learn-function-composition-23f41d4db3b1) — Addressing [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern) is often accomplished using crude and fragile copy/paste techniques. Here’s a more elegant approach. Eric Elliott [Preact's _Signals_: A 'Fast-by-Default' Reactive State Primitive](https://preactjs.com/blog/introducing-signals/) — They provide a reactive way of expressing state (in a natural way that feels like using plain values) such that apps stay fast regardless of complexity. It’s a Preact (a [slimline React alternative](https://preactjs.com/)) development, but it can be used with React through a monkeypatch. Note that Dan Abramov [shares](https://twitter.com/dan_abramov/status/1565380058994425861) that the idea isn’t “very promising” for React’s future road map for various reasons. Preact Team **QUICK ITEMS:** - On his short-format Q&A podcast, Kent C Dodds explains [▶️ how to unit test graphical components](https://kentcdodds.com/calls/01/98/testing-a-graphical-component) where there's no text to select against. _(3 minutes)_ - Talking of Kent C Dodds, he's [left the Remix team](https://kentcdodds.com/blog/a-review-of-my-time-at-remix) to focus on [a new endeavor](https://kentcdodds.com/blog/i-m-building-epicweb-dev) around teaching, livestreaming and talking about modern Web development skills. - Did you see how the next iPhone is going to have a 'Dynamic Island' feature where the camera hole is used as part of a UI feature? [Someone's reproduced it with React](https://codesandbox.io/embed/dynamic-island-kzwvzo?codemirror=1). - Josh Collinsworth bravely(?) argues that _"React isn’t great at anything except being popular."_ Of course, there's [a bit more to it than that..](https://joshcollinsworth.com/blog/self-fulfilling-prophecy-of-react) [The Basics of Remix](https://css-tricks.com/the-basics-of-remix/) — Remix is an up and coming full stack Web framework with a lot of neat ideas. This introduction covers all the basics of handling routing, form handling, headers, meta tags and links to get you up and running. Brittney Postma [A React 'Bug' (Of Sorts..)](https://phelipetls.github.io/posts/surprising-react-bug/) — The `details` HTML element doesn’t seem to play well when used as a controlled component in React, as pointed out in this [open GitHub issue](https://github.com/facebook/react/issues/15486). A quirk to be aware of. Phelipe Teles [Simple React Scroll Animations with Zero Dependencies](https://t.co/5I3j1xPYp9) — In three straightforward steps, this shows you how to trigger fade- or float-in animations during scrolling using nothing but hooks, CSS and the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Bret Cameron [The Orton Effect: 'Dreamy' Looking Photos with CSS and React](https://mikebifulco.com/posts/orton-effect-css-react) — Named after Canadian landscape photographer Michael Orton, [this image effect](https://www.capturelandscapes.com/orton-effect-explained/) creates a surreal, dream-like result. Mike Bifulco [Why Create React App is 'Outdated' in 2022?](https://javascript.plainenglish.io/why-create-react-app-is-outdated-in-2022-b1d9c99e18d0) — (Spoiler: It’s still fine, but there are now more context-specific options to consider.) Collin Pfeifer [When to Use `useImperativeHandle` and `forwardRefs` in React 18](https://betterprogramming.pub/when-to-use-useimperativehandle-and-forwardrefs-in-react-18-89cce42b3309) Sameer Kumar Jobs [Full-Stack Engineer (NYC / Remote)](https://apply.workable.com/j/E0E1B15339) — 100M+ devices, 100B+ API calls. Radar is looking for Product Engineers to build geospatial dev tools. Radar [Find React Jobs with Hired](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) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 🛠 Code and Tools [React Router 6.4: Bringing in the Remix Features](https://remix.run/blog/react-router-v6.4) — The latest release of the popular router adds data loading, data mutation, pending navigation, and error handling APIs from Remix, bringing them to every React Router app. Ryan Florence. [React Grid Gallery 1.0: An Image Gallery Component](https://benhowell.github.io/react-grid-gallery/) — Inspired by Google Photos. There are several good demos to see, and you can integrate it with a lightbox component if needed. [GitHub repo](https://github.com/benhowell/react-grid-gallery). Ben Howell [Seamlessly Add Chat and Activity Feeds to Your Applications](https://getstream.io/chat/sdk/react/?utm_source=ReactStatus&utm_medium=Promoted_Newsletter&utm_content=Developer&utm_campaign=ReactStatus_September2022_ReactChatSDK_klmh22) Stream sponsor [Radix Icons: A Crisp Set of 15×15 SVG Icons](https://icons.radix-ui.com/) — Copy any icon directly in inline SVG format or download for Figma, Sketch, or as individual React components. WorkOS - [Next.js 12.3](https://nextjs.org/blog/next-12-3) - [React Resume Website Template 2.0](https://github.com/tbakerx/react-resume-template) ↳ Personal resume website on Next.js. - [Mantine 5.3](https://mantine.dev/changelog/5-3-0/) ↳ React components library with native dark theme support - [React Hot Toast 2.4](https://github.com/timolins/react-hot-toast) ↳ Customizable notifications UI. - [react-youtube 10.0](https://github.com/tjallingt/react-youtube) ↳ YouTube player component – now for React 18. - [react-native-autocomplete-input 5.2](https://github.com/mrlaessig/react-native-autocomplete-input) ↳ Pure JS autocomplete input for React Native. - [React Spring 9.5.4](https://github.com/pmndrs/react-spring) ↳ Spring physics based animation library. - [Preact 10.11](https://github.com/preactjs/preact) ↳ Fast 3kB React alternative with the same API. This issue was curated by Terence C. Gannon 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