--- title: "Best practices for using Styled Components" publication: "React Status" issue: 235 published_at: "2021-04-21" canonical_url: "https://react.statuscode.com/issues/235" --- Plus Tailwind UI gains React and Vue support. | #​235 — April 21, 2021 [Read on the Web](https://react.statuscode.com/issues/235) React Status ⚛️ _Your weekly React news digest, every Wednesday_ [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1618999001/kdrgqjzayfxjyuo4usjq.png)](https://blog.asayer.io/the-definitive-guide-to-profiling-react-applications) [An Introduction to Profiling React Apps](https://blog.asayer.io/the-definitive-guide-to-profiling-react-applications) — If you’re ready to get to the heart of React rendering performance, you’ll want to look at the [Profiler API](https://reactjs.org/docs/profiler.html) and this guide gets you started on the right path. Ovie Okeh [_Styled Components_ Best Practices for React Developers](https://www.robinwieruch.de/styled-components) — There’s not a single “right way” to use [Styled Components](https://styled-components.com/) for styling your components, says Robin, but there are still some best practices to keep in mind. Robin Wieruch [![\](https://copm.s3.amazonaws.com/91ccf744.png)](https://www.bugsnag.com/content/react-native-migration-benefits-and-challenges?utm_source=react-status&utm_medium=cpc&utm_content=jbhunt-webinar&utm_campaign=2021-04-webinar-jbhunt&utm_term=210421) [Webinar: Benefits and Challenges of Migrating to React Native](https://www.bugsnag.com/content/react-native-migration-benefits-and-challenges?utm_source=react-status&utm_medium=cpc&utm_content=jbhunt-webinar&utm_campaign=2021-04-webinar-jbhunt&utm_term=210421) — Learn how the engineering team at J.B. Hunt adopted React Native on their Android and iOS apps. Hear their journey firsthand - considerations and goals for migration, lessons learned - in this free webinar.[Register](https://www.bugsnag.com/content/react-native-migration-benefits-and-challenges?utm_source=react-status&utm_medium=cpc&utm_content=jbhunt-webinar&utm_campaign=2021-04-webinar-jbhunt&utm_term=210421). Bugsnag sponsor [On Building React Support for Tailwind UI](https://blog.tailwindcss.com/building-react-and-vue-support-for-tailwind-ui) — Yes, [Tailwind UI](https://tailwindui.com) now has React and Vue support and this is the detailed, inside story on the technical underpinnings of how it came together. Adam Wathan [Goober's 'Great Shave Off'](https://goober.rocks/the-great-shave-off) — In the seemingly never-ending quest for making [goober](https://goober.rocks) the smallest and lightest [CSS-in-JS](https://cssinjs.org) library, they will pay you cold hard cash if you can make it even _smaller_. How much? How does a buck a byte sound? Certainly a novel approach! Goober [The GAAD Pledge and React Native's Commitment to Accessibility](https://reactnative.dev/blog/2021/04/08/GAAD-March-Accessibility-Issue-Update) — Back in May 2020, Facebook was the first company to take the [GAAD Pledge](https://diamond.la/GAADPledge/), a committment to place accessibility at the heart of their applications. Here’s an update on their progress with regards to React Native. Alexandra Marlette Jobs [Enjoy Building Scalable Infrastructure in Go? Stream Is Hiring](https://angel.co/company/stream/jobs/241159-backend-software-engineer-go) — Like coding in Go? We do too. Stream is hiring in Amsterdam. [Apply now](https://angel.co/company/stream/jobs/241159-backend-software-engineer-go). Stream [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) — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now. Hired 🧑‍💻 Got a job listing to share? _[Here's how](https://booking.cooperpress.com/jobs)_. 📘 Tutorials and Stories [Five Key Lessons React Tutorials Don't Teach](https://reedbarger.hashnode.dev/5-key-lessons-react-tutorials-dont-teach) — The author enumerates and explains the important concepts which he feels receive short shrift from many React tutorials. Reed Barger [Using React Components Written in JavaScript with TypeScript Code](https://wanago.io/2021/04/12/react-components-in-javascript-typescript-code/) — Given the growing popularity of [TypeScript](https://www.typescriptlang.org), you may want to use this strategy for incrementally incorporating it into your existing project. Marcin Wanago [Build, Deploy, and Update Applications Fast—All on the Cloud](https://events.outsystems.com/YPrME?RefId=email-paid-cooper-press) — Join OutSystems and AWS at our Cloud Innovation Summit May 11-12 to see how you can break away from the app dev status quo. OutSystems sponsor [Implementing Instagram Photo Filters in React Native](https://www.instamobile.io/react-native-tutorials/instagram-photo-filters-react-native/) — Instagram took [photo filters](https://www.pcmag.com/encyclopedia/term/image-filter) mainstream many years ago.. but what if you want a similar idea in your own apps? Chukwudi Ezichi ▶[Let's Learn Snowpack with Fred Schott](https://youtu.be/QzjFC4Q6RaU) — If you’re getting a little weary of the less than stellar performance of bundlers like [webpack](https://webpack.js.org), you may want to give [Snowpack](https://www.snowpack.dev) a try as discussed in this recent [episode](https://www.telerik.com/react-wednesdays). TJ VanToll and Dan Wilson [SolidJS — React Meets Svelte?](https://t.co/SzHiASYGit?amp=1) — [SolidJS](https://solidjs.com) can deliver many of the performance benefits of [Svelte](https://svelte.dev) without asking the developer to abandon the React syntax with which they’re familiar. Alex Merced [Create an Image Modal with React and JavaScript](https://t.co/sQVn57qwDQ?amp=1) — A concise, self-contained tutorial on adding this popular and intuitive UI feature to your app. John Au-Yeung 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/lfm7rspixzoxfjujoywj.jpg)](https://reactflow.dev/) [React Flow 9.5: Node-Oriented Applications Made Easy](https://reactflow.dev/) — We first covered this in [187](https://react.statuscode.com/issues/187) but a host of recent updates warrants taking another look at this library. _(And, no, that's not 'node' as in Node.js, but node as in laying out workflows in the form of graphs.)_ Webkid [react-markdown: Markdown for React Powered by Remark](https://github.com/remarkjs/react-markdown) — With the pervasiveness of [Markdown](https://daringfireball.net/projects/markdown/) for text editing, it's probably in your app somewhere. This component lets you do live previews for your users. Check out the [demo](https://remarkjs.github.io/react-markdown/). Remark [Beta Console: Live List of 100+ Developer Tool Beta Releases](https://console.dev/betas?ref=react) Console.dev sponsor [Headless UI: Accessible UI Components for Tailwind CSS](https://headlessui.dev/) — Build components without worrying about their complex implementations while retaining the ability to style them as you see fit. Tailwind Labs [Tabler Icons: 1250 Free MIT-licensed High-Quality SVG Icons](https://github.com/tabler/tabler-icons) — The icons for which you are looking really _have_ to be in this comprehensive, free set. Finding the right one is a cinch with their [search utility](https://tabler-icons.io). Tabler **⚡️ Quick Bits:** Interesting projects which you may have missed: - [React Idle Timer](https://github.com/SupremeTechnopriest/react-idle-timer) — Determine when your app is **not** being used. - [React Auth Kit](https://github.com/react-auth-kit/react-auth-kit) — A simple solution for token-based authentication. - [React Alice Carousel](https://github.com/maxmarinich/react-alice-carousel) — Content galleries, rotators and carousels. - [react-scanner](https://github.com/moroshko/react-scanner) — Scans code and extracts React components. - [ReactCardFlip](https://github.com/AaronCCWong/react-card-flip) — What’s on the back of that photo? ([Demos.](https://aaronccwong.github.io/react-card-flip/)) 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