--- title: "Rendering interactive graphs in React apps" publication: "React Status" issue: 187 published_at: "2020-05-06" canonical_url: "https://react.statuscode.com/issues/187" --- This week's React news, links, and libraries #187 — May 6, 2020 [Read on the Web](https://react.statuscode.com/issues/187) React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/opgtdyuf59itavxpfn3i.jpg)](https://webkid.io/blog/react-flow-node-based-graph-library/) [React Flow: A Library for Rendering Interactive Graphs](https://webkid.io/blog/react-flow-node-based-graph-library/) — If you have a need to lay out graphs in a visual way and be able to smoothly pan and zoom around such graphs, this is an interesting new library. [Live demo here](https://react-flow.netlify.app/). This sort of thing can provide a neat way to visually lay out workflows in apps [Node-RED](https://nodered.org/) style. [React-Diagrams](https://github.com/projectstorm/react-diagrams) is a similar library that gets even more advanced. Moritz Klack [What The Heck _is_ React 'Fast Refresh'?](https://mariosfakiolas.com/blog/what-the-heck-is-react-fast-refresh/) — **React Fast Refresh** is the successor of **React Hot Loader**. It was initially released for React Native and soon it will be included in Create React App as an experimental feature. Marios Fakiolas [![\](https://copm.s3.amazonaws.com/27165ec5.png)](https://www.telerik.com/blogs/how-to-add-custom-styles-to-kendoreact-components-with-sass?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-easy-customization&utm_content=primary) [How to Add Custom Styles to KendoReact Components with Sass](https://www.telerik.com/blogs/how-to-add-custom-styles-to-kendoreact-components-with-sass?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-easy-customization&utm_content=primary) — When implementing third-party UI components into your React app, it can be hard to match the design language you’re working with. See what the KendoReact team does to make this process easy. [Read more](https://www.telerik.com/blogs/how-to-add-custom-styles-to-kendoreact-components-with-sass?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-easy-customization&utm_content=primary%20). Progress KendoReact sponsor [React Interview Questions and Answers](https://github.com/sudheerj/reactjs-interview-questions) — If you’re looking for a job and preparing for interviews, or if you just want to revise your overall knowledge, you might find this really useful. The [Cheat Sheet for React Interviews](https://medium.com/@stevenjinyi/study-sheet-for-react-interview-questions-2020-2fe25b8fa316) is a simpler take on the same idea. Sudheer Jonna [useWorker() 3.0: A React Hook for Blocking-Free Background Tasks](https://github.com/alewin/useWorker) — Makes it easier to throw tasks off to a Web Worker in React. Alessio Koci 💻 Jobs [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 [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 ℹ️ _Interested in running a job listing in React Status? There's [more info here.](https://booking.cooperpress.com/jobs)_ 📘 Tutorials and Stories [Common Mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library) — As the creator of [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), Kent seems well placed to pick up on the mistakes he sees in its use 😁 Worth a skim if you use it. Kent C Dodds [Implementing Dark Mode in React Apps Using `styled-components`](https://www.smashingmagazine.com/2020/04/dark-mode-react-apps-styled-components/) — Having both a ‘light’ and ‘dark’ style is a bit of a trend in Web design right now and you can bring it to your React apps too. Blessing Krofegha [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) — Have a look at our interactive chat tutorial in React and learn how to build with Stream Chat. Stream sponsor [How to Use React Ref](https://www.robinwieruch.de/react-ref) — _“Using React ref and really understanding it are two different pairs of shoes.. “_ Robin Wieruch [How to Get Started Testing React Applications](https://joaoforja.com/blog/how-to-get-started-testing-react-applications/) João Forja [React Concurrent Mode](https://blog.logrocket.com/react-concurrent-mode/) — This covers [concurrent mode](https://reactjs.org/docs/concurrent-mode-intro.html%20), an experimental feature in React that’s not quite ready for production, that helps apps gracefully adjust to a user’s device and network speed. Florian Rappl [Performance Optimization in React Context](https://saul-mirone.github.io/performance-optimization-in-react-context/) Saul Mirone [How to Add Authentication to React Native in Three Steps Using Firebase](https://www.freecodecamp.org/news/how-to-add-authentication-to-react-native-in-three-steps-using-firebase/) Said Hayani 🔧 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ellyfugb2b77vlj3p1pb.jpg)](https://github.com/Raathigesh/majestic) [Majestic 1.7: A Zero Config GUI for Jest](https://github.com/Raathigesh/majestic) — A tool to help make your JavaScript testing life a little easier. Run `npx majestic` in the folder of any project that uses Jest to give it a quick try. Works with Create React App. Raathi Kugarajan [React Cool Inview: A Hook to Monitor When an Element Enters/Leaves the Viewport](https://github.com/wellyshen/react-cool-inview) — Small. Uses Intersection Observer to stay performant. Well documented with lots of examples. Welly [React H5 Audio Player: A Web Audio Player Component](https://github.com/lhz516/react-h5-audio-player) — Written in TypeScript. Accessible. Both mobile and desktop. [Demos here](https://static.hanzluo.com/react-h5-audio-player-storybook/index.html?path=/docs/layouts--default-story). Hanz Luo [Getting Started with OpenTelemetry in Node.js](https://docs.lightstep.com/otel/getting-started-node?utm_campaign=react&utm_source=cooper&utm_medium=Email) Lightstep sponsor [React-Select-Search: Lightweight 'Select' Component](https://github.com/tbleckert/react-select-search) Tobias Bleckert [Little State Machine 3.0: A Custom Hook for Persisted State Management](https://github.com/bluebill1049/little-state-machine) Blue Bill [React Tiny Link: A Component to Provide Link Previews](https://winhtaikaung.github.io/react-tiny-link/) — You’ll see this sort of thing if you post links on Facebook or Twitter, say. Win Htaik Aung [React-Leaflet 2.7: React Components for Leaflet Maps](https://react-leaflet.js.org/) — [Leaflet](https://leafletjs.com/) is a popular JavaScript library for creating interactive maps. This library brings support direct to React. Paul Le Cam 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