---
title: "visx: Expressive, low-level visualization primitives for React"
publication: "React Status"
issue: 208
published_at: "2020-09-30"
canonical_url: "https://react.statuscode.com/issues/208"
---

⚛️ This week's React news, links, and libraries       

#208 — September 30, 2020 

[Read on the Web](https://react.statuscode.com/issues/208)   React Status Your weekly React news digest, every Wednesday  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1601464683/r16hqq5tdhxd9thbhxfe.png)](https://medium.com/airbnb-engineering/introducing-visx-from-airbnb-fd6155ac4658)  

[Introducing visx: Visualization Primitives for React from Airbnb](https://medium.com/airbnb-engineering/introducing-visx-from-airbnb-fd6155ac4658) — When a tech powerhouse launches a new [visualization library](https://github.com/airbnb/visx) after three years of development, it’s worthy of attention. Formerly known simply as _vx_, browse the [gallery](https://airbnb.io/visx/gallery) and see if you’re not inspired. 

Chris C. Williams & Harrison Shoff / Airbnb   

[Myths About useEffect](https://epicreact.dev/myths-about-useeffect/) — In the latest teaser for his upcoming course, Kent addresses the struggle many developers have employing the `useEffect` hook correctly. As usual, he makes it seem easy. 

Kent C. Dodds   [![\](https://copm.s3.amazonaws.com/aaf088b3.png)](https://getstream.io/chat/react-chat/tutorial/?utm_campaign=react_status&utm_medium=promoted_newsletter&utm_source=react_status_promoted) 

[Building Chat With React? Stream Chat Has You Covered](https://getstream.io/chat/react-chat/tutorial/?utm_campaign=react_status&utm_medium=promoted_newsletter&utm_source=react_status_promoted) — This tutorial shows you how to quickly build chat leveraging Stream's Chat API and the Stream Chat React components. 

Stream sponsor   

[How to Use SVG Icons with React Icons and Font Awesome](https://www.freecodecamp.org/news/how-to-use-svg-icons-in-react-with-react-icons-and-font-awesome/) — The author asserts that ‘[SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) was born for the web’ and having a widely supported vector graphics format makes a lot of things easier for sure, such as icons that render well on every device and at every resolution. Here’s the short course on integrating them into React. 

Colby Fayock   

[`import React from 'react'` To Go Away in the Long Term](https://twitter.com/dan_abramov/status/1308739731551858689?s=20) — Don’t panic, though – they’re thinking more along the lines of React 19 or 20. But it’s worth switching to better alternatives now. 

Dan Abramov on Twitter   

[react-dropdown-tree-select: A Customizable Fast Dropdown Tree Select Component](https://github.com/dowjones/react-dropdown-tree-select) — A lightweight and fast control to render a select component that can display hierarchical tree data. Here's [an interactive demo.](https://dowjones.github.io/react-dropdown-tree-select/#/story/with-bootstrap-styles) 

Dow Jones  

💻 Jobs  

[Front End Development Leader](https://ourbranch.com/s/careers) — Wanted: A Front End Developer to lead a group of young software developers. Help us change the insurance industry for the better. 

BRANCH INSURANCE   

[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) — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. 

Vettery  

ℹ️ _Interested in running a job listing in React Status? There's [more info here.](https://booking.cooperpress.com/jobs)_ 

📘 Tutorials and Stories  

[Here’s a Simpler Alternative to Redux](https://t.co/rzXxY5wtNo?amp=1) — In the seemingly never ending search for better and simpler state managment, the [container pattern](https://medium.com/@karthi.net/8-container-design-patterns-that-you-should-know-970a1d6a594c) is brought to bear on the problem. 

Spencer Pauly   

[The Modern Way to Style with Styled Components](https://t.co/btvBAIGlST?amp=1) — The author takes you on his journey from styling React with inline CSS to fully utilizing [Styled Components](https://styled-components.com/). He vows to never go back to his old way of doing things. 

Michael Chang   

[React Data Grids - A Complete Guide](https://www.grapecity.com/blogs/a-guide-for-using-data-grids-in-react?utm_source=CooperPress&utm_medium=Dynamic&utm_campaign=JS%20Weekly%20Newsletter_09/2020) — With this guide, teams have access to best practices, as well as instructions for creating an advanced React data grid. 

Wijmo by GrapeCity, Inc. sponsor   

[Ketting v6: Using Hypermedia APIs with React](https://evertpot.com/ketting-6/) — If you’re about to start building REST functionality on top of the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), stop. First, you want to check out this well-established library which delivers just that. Now in its sixth major release. 

Evert Pot   

[A React Cheatsheet for 2020](https://dev.to/codeartistryio/the-react-cheatsheet-for-2020-real-world-examples-4hgg) — We somehow missed this when it came out earlier this year but it’s a handy resource for those who prefer just-in-time learning or want _even more_ prep for nailing that interview. 

Reed Barger   

[15 React Interview Questions with Solutions](https://www.sitepoint.com/react-interview-questions-solutions/) — If you’re looking to break into the thriving React development ecosystem, you’re going to have to nail the interview. Here are some questions to help you prepare. 

Nilson Jacques  

🔧 Code and Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1601463237/gb61zmy8ukx13uykokrf.png)](https://github.com/brainhubeu/react-carousel)  

[react-carousel: An Extendable Image Carousel](https://github.com/brainhubeu/react-carousel) — Using this library to achieve an effective presentation of images really couldn’t be easier: simply pass it the `img` tags with your images and it does the rest for you. Check out [some examples.](https://brainhubeu.github.io/react-carousel/docs/examples/simpleUsage/) 

Brainhub   

[Tippy.js for React: Tooltips, Popovers, Dropdowns, and Menus](https://github.com/atomiks/tippyjs-react) — It has been nearly two years to the day since we last featured this [Popper](https://popper.js.org)-powered library, but a recent new release necessitated another look. Its built-in [WAI-ARIA](https://en.wikipedia.org/wiki/WAI-ARIA)-compliance is a big plus. 

James N / Atomiks   

[Online Checkout Made Simple with Square’s Payments APIs and SDKs](https://squareup.com/t/f_online/d_newsletter/p_reactstatus/l_us/dt_alldevice/pr_ecommerce_api/?route=online-payments-how-to&site=developer.squareup.com) 

Square Developer sponsor   

[mobx-react-lite: Lightweight Hook-Based Bindings for MobX](https://github.com/mobxjs/mobx-react-lite) — If you can limit yourself to functional components and want to benefit from a smaller and faster library, _mobx-react-lite_ could be the right choice for you. 

MobX   

[react-nil: A React 'Null Renderer'](https://github.com/pmndrs/react-nil) — An interesting experiment to use React in situations where you don’t need it to render anything, but you want to use hooks, suspense, context, and other bits of the React ecosystem. Like in, say, a Node app. Maybe [this CodeSandbox example](https://codesandbox.io/s/react-nil-mvpry) will provoke some thoughts. 

Poimandres   

[react-sortable: A Component Built on Top of the Mature SortableJS Drag and Drop Library](https://github.com/SortableJS/react-sortablejs) 

SortableJS   

[GitHub Profile README Generator](https://github.com/rahuldkjain/github-profile-readme-generator) — This brand new library is getting a lot of attention. It’s no wonder given that it promises to automate all the mindless busy work which normally goes into maintaining [READMEs](https://en.wikipedia.org/wiki/README). 

Rahul Jain         

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
