--- title: "Event bubbling" publication: "React Status" issue: 272 published_at: "2022-01-19" canonical_url: "https://react.statuscode.com/issues/272" --- Plus how *not* to learn TypeScript. | #​272 — January 19, 2022 [Read on the Web](https://react.statuscode.com/issues/272) React Status ⚛️ Your weekly React news digest, _every Wednesday_. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/qscpaogir0sphevi4kgv.jpg)](https://thoughtspile.github.io/2022/01/17/jsx-conditionals/) [Good Advice on JSX Conditionals](https://thoughtspile.github.io/2022/01/17/jsx-conditionals/) — _“Time after time I shoot myself in the foot with JSX conditionals. In this article, I look at the trickier corners of JSX conditionals, and share some tips for staying safe”_. As always, there are other options, though, and future potential options too as may eventually be offered by [do expressions](https://github.com/tc39/proposal-do-expressions) or [pattern matching](https://github.com/tc39/proposal-pattern-matching). Vladimir Klepov [How Storybook Migrated 541 Components from Styled Components to Emotion (Without Bugs)](https://storybook.js.org/blog/541-components-from-styled-components-to-emotion/) — The Storybook team essentially dogfooded their [Chromatic](https://www.chromatic.com/) visual testing tool to streamline a refactor. Varun Vachhar (Storybook) [![\](https://copm.s3.amazonaws.com/4fa99f56.png)](https://solidus.io/?utm_source=cooperpress&utm_medium=display&utm_campaign=react-status-1-19-22) [Introducing the Last eCommerce Back-End You’ll Ever Need](https://solidus.io/?utm_source=cooperpress&utm_medium=display&utm_campaign=react-status-1-19-22) — Solidus powers the brands defining the future of eCommerce. We’re the free, open-source framework created by a dedicated group of passionate developers, agencies, and retailers that work together to move the platform forward. Come take a look. Solidus sponsor [React Event Bubbling and Capture](https://www.robinwieruch.de/react-event-bubbling-capturing/) — [Event bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture) occurs when handling events within nested elements: an event ‘bubbles up’ from one element to its container until it reaches the root element. This behavior can be both helpful and troublesome — here’s how to handle it correctly with React. Robin Wieruch [How Not to Learn TypeScript](https://fettblog.eu/how-not-to-learn-typescript/) — Five useful pointers from someone who's spent a lot of time with TypeScript. Stefan Baumgartner [Three React Component Design Patterns You Should Know About](https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about) — _“While this is not an exhaustive list, it applies to most problems you will probably encounter when building components.”_ Samaila Bala [React Server Components in Next.js 12](https://blog.logrocket.com/react-server-components-nextjs-12/) — If you’re excited to start using [React Server Components](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) — part of React 18 — you’ll be delighted to know they will also work with Next.js 12+. You can start experimenting now. Chinwike Maduabuchi [React Native Engineer Builds a SwiftUI App: The Good, The Bad & The 🤯](https://medium.com/async/a-react-native-engineer-builds-a-swiftui-app-the-good-the-bad-and-the-bee871bb9baa) — If you’ve spent a lot of time in React Native—as is the case for the author—you may have wondered what it’s like to make to leap to [SwiftUI](https://developer.apple.com/xcode/swiftui/). Here’s his assessment. Daniel Merrill Jobs [Director of Engineering @ ButterCMS (Remote)](https://apply.workable.com/buttercms/j/C70D8C3FB5/) — Working closely with our founder and CEO, you’ll own all technology, deliver on our roadmap, and most importantly, ensure that our customers are successful. ButterCMS [Senior React Engineer @ Nebulab (Remote)](http://nebulab.com/careers?gh_src=659d9832teu) — Join our distributed team and build high-volume eCommerce applications in a workplace made by developers for developers. Nebulab [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 [Sneak Peek into React 18: The `useDeferredValue` Hook](https://blog.saeloun.com/2022/01/13/react-18-usedefferedvalue-hook) — `useDeferredValue` is one of the new [Concurrent](https://reactjs.org/docs/concurrent-mode-patterns.html) features included in the upcoming major release of React which is [now in beta](https://github.com/reactwg/react-18/discussions/112). This describes how to use it to keep the UI responsive while waiting for data to be retrieved. Chetan Gawai [How to Migrate Your Blog from Gatsby to Next.js](https://blog.appsignal.com/2022/01/12/how-to-migrate-your-blog-from-gatsby-to-nextjs.html) Nikola Đuza [Running Next and Remix on the Same Server](https://sergiodxa.com/articles/run-next-and-remix-on-the-same-server) Sergio Xalambrí ▶[React Elements vs React Components in 59 Seconds](https://www.youtube.com/watch?v=6b7yQ2bed0o) Tyler McGinnis [Six Tips to Make Your React Components More Reusable](https://isamatov.com/react-reusable-components/) Iskander Samatov 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/mgfehsu52mnyuns6ojrg.jpg)](https://github.com/g1eb/reactjs-calendar-heatmap) [React Calendar Heatmap: A Component for D3.js Calendar Heatmaps](https://github.com/g1eb/reactjs-calendar-heatmap) — Supports a variety of views including years (which look a bit like GitHub’s contribution heatmaps), months, weeks, or even down to a single day. Gleb [JHipster: Spring Boot and React in One Generator](https://github.com/jhipster/generator-jhipster) — One for you if you're in the Java world or headed there soon. _“Generate, develop, and deploy modern web applications and microservice architectures”_ with support for a number of popular frameworks including React. Now in its seventh major release with a broad user base. JHipster [Visualize Data Using JavaScript with Recharts and InfluxDB](https://www.influxdata.com/blog/recharts-influxdb-tutorial-visualize-iot-sensor-data-reactjs/?utm_source=vendor&utm_medium=referral&utm_campaign=2022-01-19_spnsr-nl_recharts-influxdb_global&utm_content=reactstatus) InfluxData sponsor [drei: Helpers and Abstractions for `react-three-fiber`](https://github.com/pmndrs/drei) — Browsing the [index](https://github.com/pmndrs/drei#index) of visually striking examples will quickly introduce the broad array of capabilities from this prolific developer collective. Poimandres [React Headless Hooks: Powerful Components That You Control](https://github.com/webeetle/react-headless-hooks) — The idea of these 'headless' components is that you get the behavior of an accordion, carousel, pagination, and similar mechanisms, but you retain 100% control over markup and styling. There's a guide to [getting started in ‘two minutes’](https://webeetle.github.io/react-headless-hooks/docs/intro) along with [CodeSandbox examples](https://webeetle.github.io/react-headless-hooks/docs/useAccordion) for each of the components. weBeetle [React Tracking 9.1: Declarative Tracking for React Apps](https://github.com/nytimes/react-tracking) — I’m a big fan of their crosswords, but the NYT puts out a lot of code too. The New York Times [Million: A Tiny Library-Agnostic Virtual DOM Implementation](https://github.com/aidenybai/million) — An all-new core for JavaScript libraries which are focused on precompilation and static analysis, as described in the author’s [blog post](https://dev.to/aidenybai/million-js-the-future-of-virtual-dom-1e6d) from last year. Aiden Bai ## ⚡️ Quick Bits: - [React Native Clean Project](https://github.com/pmadruga/react-native-clean-project) — Automatically purges caches and modules and then re-installs them. - [react-native-reanimated-carousel](https://github.com/dohooo/react-native-reanimated-carousel) — _"High performance infinite scroll component."_ - [Plock](https://github.com/itsrennyman/react-plock) — A 'masonry' layout component best illustrated with [their demo](https://react-plock.netlify.app). 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