--- title: "Profiling React.js Performance" publication: "React Status" issue: 184 published_at: "2020-04-15" canonical_url: "https://react.statuscode.com/issues/184" --- This week's React news, links, and libraries #184 — April 15, 2020 [Read on the Web](https://react.statuscode.com/issues/184) React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/zxtdpmghuieylru0wwbt.jpg)](https://addyosmani.com/blog/profiling-react-js/) [Profiling React.js Performance](https://addyosmani.com/blog/profiling-react-js/) — Goes into detail on aspects of the React Profiler API, React’s new experimental Interaction Tracing API, and measuring custom metrics using the User Timing API. Addy Osmani [How to Style Your React Apps with Tailwind CSS and Styled Components](https://www.ibrahima-ndaw.com/blog/how-to-use-tailwind-styled-components/) — [Tailwind CSS](https://tailwindcss.com/) is a popular CSS framework and this tutorial demonstrates using it along with [Styled Components](https://styled-components.com/) to create a form component in a React app without writing any CSS, as such, at all. Ibrahima Ndaw [![\](https://copm.s3.amazonaws.com/17cff327.png)](https://retool.com?utm_source=reactstatus&utm_medium=newsletter&utm_campaign=apr_15&utm_content=faster_features) [Retool: Build Internal Tools a Lot Faster, with Less Maintenance](https://retool.com?utm_source=reactstatus&utm_medium=newsletter&utm_campaign=apr_15&utm_content=faster_features) — Ship in hours, not days. Retool provides UI building blocks that connect to any DB and API so you can focus on what matters. Hackable by design — you can use JavaScript anywhere, write your own custom React components and query JSON with SQL. Retool sponsor [33 Line 'React'](https://leontrolski.github.io/33-line-react.html) — Sure, React does some useful things, but you can do the same things with very little code, so.. why not? A fun experiment that is unlikely to replace React! 😄 Also of interest is that Hacker News [had its say](https://news.ycombinator.com/item?id=22776753) and the [author responded](https://leontrolski.github.io/33-line-react-thoughts.html). Oliver Russell [A Tour of Creating a 'Gauge' in React](https://wattenberger.com/blog/gauge) — A very neatly presented walk through of what it takes to build a ‘gauge’ in React, an on-page animated component kind of like an odometer. Amelia Wattenberger 💻 Jobs [Find a Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-reactstatus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77585) — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. Vettery [React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=react) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere. X-Team 📘 Tutorials and Stories [How to Build a Todo App using React and Firebase](https://www.freecodecamp.org/news/how-to-build-a-todo-application-using-reactjs-and-firebase/) — Before you say _“not another to-do list tutorial!”_, it’s less common to see Firebase being used, and learning how to integrate with that could be of value to you. Sharvin Shah [Why You Should Keep Faith with React Native](https://blog.logrocket.com/why-keep-faith-react-native/) — Is React Native dead? Maybe according to some. But the fact is that React Native is about to receive a whole lot of new features and upgrades this year. Zain Sajjad [Let's Build a Financial Dashboard App with React (Free Webinar)](https://www.telerik.com/campaigns/kendo-ui/wb-financial-dashboard-with-react?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-webinar-fin-dash&utmcontent=sponsored-link) — On April 23, TJ VanToll will stream a 45-minute live session building a stock portfolio app with React. Save your seat. Progress KendoReact sponsor [The Algebraic Structure of Functions, Illustrated using React Components](https://jrsinclair.com/articles/2020/algebraic-structure-of-functions-illustrated-with-react-components/) — This is one of those “let’s look at something familiar but from a different angle” articles. There’s nothing new here except, perhaps, perspective. James Sinclair [Stop Using Client-Side Route Redirects](https://kentcdodds.com/blog/stop-using-client-side-route-redirects) — To be honest, this might not be something you’re doing anyway. Kent C Dodds [Effective Code Splitting in React: A Practical Guide](https://hackernoon.com/effective-code-splitting-in-react-a-practical-guide-2195359d5d49?source=rss) — Some techniques on implementing code-splitting, or breaking your code into modular bundles for better performance, in React projects. hackernoon [Build Your Own React](https://pomb.us/build-your-own-react/) — Just wanted to revisit this if you want something really meaty to work on during the lockdown. It’s a well presented walkthrough of creating your own React-a-like from scratch. You’ll need some time set aside to follow along. It’s more advanced than the 33 line React-a-like we posted above. Rodrigo Pombo [Building and Styling Tables with react-table v7](https://blog.logrocket.com/building-styling-tables-react-table-v7/) — Creating tables with React can be a pain. react-table v7 provides a modern, Hooks-based API that helps us create tables in React with little hassle. John Au-Yeung ▶[Mapping with React Leaflet](https://egghead.io/playlists/mapping-with-react-leaflet-e0e0) — A brief Egghead screencasts collection. Colby Fayock [Our Tech Skills Platform Is Free for the Month of April. Start Today](https://go.pluralsight.com/C0085959) Pluralsight sponsor 🔧 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/lystdh70xral37lj5pd0.jpg)](https://github.com/localjo/react-tater) [react-tater: Add Annotations to Any Element on a Page](https://github.com/localjo/react-tater) — Why ‘tater’? (Anno)tater, apparently 😄 Here’s [a live demo](https://iamlocaljo.com/graphy-react-challenge/) where you can create your own such annotations or take a tour. Jo Sprague [snake-cubed: A New, React-Based Spin on the Classic Game of 'Snake'](https://github.com/qdozaq/snake-cubed) — Imagine _Snake_ but in 3D and within a cube environment. I can’t get my head around the controls, but you can [play it here](https://github.com/qdozaq/snake-cubed) if you like. A fun project to learn react-three-fiber. Paul Mendoza [Preact 10.4.0: The Fast 3KB React Alternative (With The Same API)](https://github.com/preactjs/preact/releases/tag/10.4.0) — _“This release contains some very amazing improvements to hydration and to performance when memoized vnodes are used. We recommend everyone to upgrade.”_ Preact [React Intl: Internationalization (i18n) for React Apps](https://github.com/formatjs/react-intl) — Components and an API to format dates, numbers, and strings, including pluralization and handling translations. Now part of the broader [Format.js](https://formatjs.io/) effort too. Yahoo Inc [React PDF Viewer: A React Component to View PDF Documents](https://github.com/phuoc-ng/react-pdf-viewer) Phuoc Nguyen [react-virtualized-tree: A Virtualized Tree View Component Built on react-virtualized](https://github.com/diogofcunha/react-virtualized-tree) Diogo 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