--- title: "What you need to know about React 18" publication: "JavaScript Weekly" issue: 543 published_at: "2021-06-18" canonical_url: "https://javascriptweekly.com/issues/543" --- Plus a pathfinding visualizer, a math renderer, and Next.js 11. | #​543 — June 18, 2021 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/543) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/zy1a5nqer7tplhf6zlou.jpg)](https://blog.webpagetest.org/posts/benchmarking-javascript-memory-usage/) [Benchmarking JavaScript Memory Usage](https://blog.webpagetest.org/posts/benchmarking-javascript-memory-usage/) — Historically, memory usage hasn’t been a heavily tracked thing in the JavaScript world, whether for a lack of tooling or motivation. This is changing, and new tools and APIs are turning up all the time. Here, Tim has done some analysis of what the top 10k Web sites are using in terms of memory and, perhaps controversially, how the choice of framework can affect things. Tim Kadlec (WebPageTest) [Dr. Axel Explains Three ECMAScript Proposals](https://2ality.com/2021/06/error-cause.html) — JavaScript’s inimitable doctor is blogging again and has [examined the ‘error cause’ proposal](https://2ality.com/2021/06/error-cause.html) (a way to let `Error` instances specify if they were caused by another error), [JSON modules](https://2ality.com/2021/06/json-modules.html) (a way to import data as if it were an ES module), and [Accessible `Object.prototype.hasOwnProperty()`](https://2ality.com/2021/06/object-hasown.html) (a way to check if an object has an own/non-inherited property). Dr. Axel Rauschmayer [![\](https://copm.s3.amazonaws.com/9de6d01b.png)](https://www.youtube.com/watch?v=HX43JqwOguk) [Take Control of Your Core Web Vitals with Raygun](https://www.youtube.com/watch?v=HX43JqwOguk) — Don't be a bystander when Core Web Vitals are released as a ranking factor by Google. In this in-depth walkthrough, our expert team follows a proven process to monitor and improve Core Web Vitals with Raygun, and give you the power to do the same. Raygun sponsor [Next.js 11 Released](https://nextjs.org/blog/next-11) — The popular React framework takes some more steps forward with improved performance, Webpack 5 support, an experimental way to make Create React App apps Next.js compatible, and [Next.js Live](https://nextjs.org/blog/next-11#nextjs-live-preview-release), a preview of a way to build Next.js apps in the browser, collaboratively, with your team. Next.js Team 💡 If you happen to use React a lot, be sure to check out [our React newsletter](https://react.statuscode.com/)too. Quick Bits - [Gleam](https://gleam.run/) is a type-safe language for the Erlang virtual machine and it [can now compile to JavaScript](https://gleam.run/news/v0.16-gleam-compiles-to-javascript/) which opens up some new interesting frontend possibilities. - GitHub's CEO has noted that [4 billion packages are downloaded each day](https://twitter.com/natfriedman/status/1405524163268288513) from the official npm registry. - Did you know [you can use underscores](https://davidwalsh.name/numeric-separators) to make numbers easier to read? For example: `1_000_000` - The Angular project has updated [its roadmap](https://angular.io/guide/roadmap) covering both in-progress improvements and future initiatives. - V8 has added support for [import assertions](https://v8.dev/features/import-assertions). Releases [NeutralinoJS 2.3.0](https://github.com/neutralinojs/neutralinojs) — Cross-platform desktop app dev framework. [SVG.js 3.1](https://svgjs.dev/docs/3.1/) — Easier manipulation of SVG from JS. [ws 7.5.0](https://github.com/websockets/ws) — WebSocket client and server for Node.js. [Intro.js 4.1](https://introjs.com/) — Easy user onboarding approach. [Tailwind CSS 2.2](https://blog.tailwindcss.com/tailwindcss-2-2) — Popular CSS framework. [Deno 1.11 Released](https://deno.com/blog/v1.11) — A variety of enhancements in the latest release of the alternative server-side V8-powered JavaScript runtime: - The Deno project now supplies [official Docker images](https://hub.docker.com/r/denoland/deno). - You can now abort `fetch` requests in a Web-compatible way. - `deno lint` is now considered stable. - `BroadcastChannel` brings support for broadcasting messages amongst Web Workers. Deno Core Team 💻 Jobs [JavaScript Developer @ Kinsta](https://jobs.lever.co/kinsta/a3fe724e-65de-424c-8c07-541b15a5390a?lever-origin=applied&lever-source%5B%5D=JS%20Newsletters) — Join our ownership-embracing team of JS developers in a relaxed environment where culture is as important as technical excellence. Kinsta [JavaScript Developer at X-Team (Remote)](https://x-team.com/remote-javascript-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=js) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Find Software Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-javascriptweekly%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 📖 Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/mc6r6tofv7sfpm246wbq.jpg)](https://www.youtube.com/watch?v=uOGImWM85Uw) ▶[What You _Need_ to Know About React 18](https://www.youtube.com/watch?v=uOGImWM85Uw) — Last week we featured [the official plan for React 18](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html) and the community has set to work chewing over what it all means. My favorite roundup is this one which tackles the big picture in the first five minutes but then goes into a little more depth if you want it. Harry Wolff [When CSS Isn’t Enough: JavaScript Requirements For Accessible Components](https://www.smashingmagazine.com/2021/06/css-javascript-requirements-accessible-components/) — Stephanie Eckles looks at how components such as tooltips, modals, tabs, carousels, and dropdown menus often require more than just CSS (even when 'pure CSS' solutions are technically possible), especially to ensure accessibility. Smashing Magazine [Infrastructure as Code using JavaScript and Pulumi](https://www.pulumi.com/docs/get-started/?utm_source=javascript-weekly&utm_medium=sponsored-link&utm_campaign=iac) — Use the JavaScript language and ecosystem to manage and provision infrastructure across any cloud and a variety of workloads. Pulumi sponsor [Examples of New Browser APIs to Detect JS Performance Problems in Production](https://michaelscodingspot.com/javascript-performance-apis/) — Basic coverage of using `performance.now()`, the Long Task API (with PerformanceObserver), the Event Timing API, and the JavaScript Self-Profiling API. Michael Shpilt [Embedding Vue.js Apps in Go(lang)](https://hackandsla.sh/posts/2021-06-18-embed-vuejs-in-go/) — With Go 1.16’s `embed`, you can now include frontend assets directly in a Go binary, making a full-stack server deployment as simple as running a single executable file. Trevor Taubitz [A Visual Guide to Node.js Streams](https://blog.insiderattack.net/a-visual-guide-to-nodejs-streams-9d2d594a9bf5) — Streams aren’t conceptually too difficult to grasp but some visuals fit well and certainly help. Deepal Jayasekara [Drawing Graphics with the CSS Paint API](https://tympanus.net/codrops/2021/06/18/drawing-graphics-with-the-css-paint-api/) — A practical introduction to the CSS Paint API with hands-on code examples including particles, noise buttons and curvy dividers. Georgi Nikolov [5 Reasons Not to Write Your JavaScript Data Grid from Scratch](https://www.telerik.com/blogs/5-reasons-not-to-write-your-javascript-data-grid-from-scratch?utm_medium=cpm&utm_source=jsweekly&utm_campaign=kendo-ui-angular-blog-never-write-a-grid&utm_content=brief-link) Progress Kendo UI for Angular sponsor [How to Dynamically Import ECMAScript Modules](https://dmitripavlutin.com/ecmascript-modules-dynamic-import/) Dmitri Pavlutin [Why Using Object Spread (`...`) with `reduce` May Be A Bad Idea](https://prateeksurana.me/blog/why-using-object-spread-with-reduce-bad-idea/) Prateek Surana [Advanced TypeScript: A Generic Function to Merge Object Arrays](https://chrisfrew.in/blog/advanced-typescript-generic-array-merging/) Chris Frewin 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/dr3ai0vesixnhrf9oglj.jpg)](https://www.mathjax.org/) [MathJax 3.2.0: Beautiful Math Rendering in All Browsers](https://www.mathjax.org/) — You’re smarter than me if you know what that formula represents, but it _looks_ nice.. [v3.2.0](https://github.com/mathjax/MathJax/releases/tag/3.2.0) dropped yesterday. [GitHub repo](https://github.com/mathjax/MathJax). MathJax [Viewer.js 1.10: A Flexible JavaScript Image Viewer](https://fengyuanchen.github.io/viewerjs/) — We first linked this almost _five_ years ago, but it’s still kept updated. If you’ve got a group of images to show, this provides user controls to move between them, zoom (including with gestures), rotate, and such like. [GitHub repo](https://github.com/fengyuanchen/viewerjs). Chen Fengyuan [Breakpoints and `console.log` Is the Past, Time Travel Is the Future](https://wallabyjs.com/?utm_source=cooperpress&utm_campaign=javascriptweekly&utm_content=javascript) — 15x faster JavaScript debugging than with breakpoints and console.log. Wallaby.js sponsor [Remote Repositories Extension for Visual Studio Code](https://code.visualstudio.com/blogs/2021/06/10/remote-repositories?WT.mc_id=devcloud-00000-cxa) — If you use VS Code, this extension from GitHub itself offers a quicker way to open GitHub repos remotely direct from the editor. Microsoft [Undici 4.0: An HTTP Client, Written from Scratch for Node](https://nodejs.medium.com/introducing-undici-4-1e321243e007) — The goal of this project has been to replace Node’s core HTTP library with something faster, more scalable, and without the ‘fundamental design issues’ of the core API. v4 introduces redirect support, a faster WASM-powered parser, and a native mocking layer. [GitHub repo](https://github.com/nodejs/undici). Nagy, Collina, et al. [A One-Click Starter Project for Next.js 11 and Netlify](https://github.com/cassidoo/next-netlify-starter) Cassidy Williams [rmodal.js: A Simple 1.2 KB Modal Dialog with No Dependencies](https://github.com/zewish/rmodal.js) Iskren Slavov 🎵 And one for fun.. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/foujaswcmbni7nkrarhu.jpg)](https://josephprichard.github.io/Pathfinder/) [A Pathfinding Algorithm Visualizer](https://josephprichard.github.io/Pathfinder/) — A fun tool for visualizing different pathfinding algorithms (essentially ways to find routes from one point to another). Here’s [the source](https://github.com/JosephPrichard/Pathfinder) if you want to dig deeper, including [the algorithms](https://github.com/JosephPrichard/Pathfinder/tree/main/src/common/pathfinding/algorithms). Joseph Prichard Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/peterc) 'JavaScript' is a trademark of Oracle Corporation in the US We are not endorsed by or affiliated with Oracle. [Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom