--- title: "The missing piece of testing React hooks and components?" publication: "React Status" issue: 255 published_at: "2021-09-08" canonical_url: "https://react.statuscode.com/issues/255" --- Plus a WYSIWYG editor, a color detection app, and how React Native for Web results in Twitter's div soup. | #​255 — September 8, 2021 [Read on the Web](https://react.statuscode.com/issues/255) React Status ⚛️ _Your weekly React news digest, every Wednesday_ [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/emklxgybtbx6ircwnlls.jpg)](https://dmitripavlutin.com/react-context-and-usecontext/) [A Guide to React Context and the `useContext()` Hook](https://dmitripavlutin.com/react-context-and-usecontext/) — While React Context can seemingly simplify component access to global data regardless of where those components are in the tree, [useContext()](https://reactjs.org/docs/hooks-reference.html#usecontext) can add its own brand of complexity, meaning it’s not suitable for _every_situation and.. _"Sometimes drilling the props through 2-3 levels in the hierarchy isn’t a big problem."_ Dmitri Pavlutin [Twitter's Web App — As Powered by _React Native for Web_](https://giuseppegurgone.com/twitter-html/) — Twitter must harbour the ambition for a common code base shared between their web and mobile apps. The big hint is their use of [React Native for Web](https://necolas.github.io/react-native-web/) for their current web offering and here's some of what that entails in terms of messy HTML and uglified CSS. Giuseppe Gurgone [![\](https://copm.s3.amazonaws.com/745cfc91.png)](https://www.telerik.com/videos/kendo-react-ui/guided-tour-of-an-easy-to-use-react-data-table-kendoreact-data-grid?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-grid-guided-tour-video) [Looking for a Data Grid? Hop On a Tour of the KendoReact Grid](https://www.telerik.com/videos/kendo-react-ui/guided-tour-of-an-easy-to-use-react-data-table-kendoreact-data-grid?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-grid-guided-tour-video) — Breeze through your React data grid research as KendoReact PM Carl Bergenhem walks you through everything you need to know, from how the grid handles basic operations to custom editing and PDF & Excel export demos. Enjoy the video. Progress KendoReact sponsor [Testing React Hooks and Components: The Missing Piece](https://marmelab.com/blog/2021/08/31/testing-react.html) — [Jest](https://jestjs.io) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) are both popular testing systems but the author asserts they lack the ability to test visually, which can more closely resemble real-world use. He uses [Storybook](https://storybook.js.org) to provide this “missing piece” of the testing puzzle. François Zaninotto [Data Table Component 7.0: A Flexible React Data Table Library](https://react-data-table-component.netlify.app/?path=/story/getting-started-intro--page) — Packed with features but easy to set up and lots of documentation available. Be sure to check out the ‘kitchen sink’ example. [GitHub repo.](https://github.com/jbetancur/react-data-table-component) John Betancur [How to Build an Android News App](https://t.co/tTRQvWElGY?amp=1) — All the functionality required of a basic news app using React Native in combination with [NativeBase](https://nativebase.io), [Expo](https://expo.dev), [React Navigation](https://reactnavigation.org/) and [News API](https://newsapi.org/). Nishant Kumar Jobs [Senior Front-End Software Engineer (US/Poland/Remote)](https://grnh.se/58ae674c3us) — Backed by Sequoia Capital and Coatue. We're looking for JS experts to join the team building the world's largest B2B marketplace. Knowde [Senior ReactJS+Rails Engineer (x/f/m) Remote or Paris, France](https://grnh.se/34144a7b3us) — Join us to transform healthcare and have a positive impact on the lives of millions of patients and practitioners alike. Doctolib [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) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired [State Management in Next.js Apps](https://www.smashingmagazine.com/2021/08/state-management-nextjs/) — Managing state in a Next.js application can get tricky very quickly. This looks at some patterns to help avoid complexity in common scenarios and avoid “provider hell.” Átila Fassina [Preparing Your React Native App for iOS 15 and Android 12](https://reactnative.dev/blog/2021/09/01/preparing-your-app-for-iOS-15-and-android-12) — Advice for readying your app for the new mobile OS versions releasing late this year and avoiding any regressions when the releases become generally available. Samuel Susla [Virtualizing Large Data Lists with react-window](https://blog.openreplay.com/virtualizing-large-data-lists-with-react-window) Ikeh Akinyemi [Converting a Large Create React App Project from JavaScript to TypeScript](https://chrisfrew.in/blog/converting-a-large-project-from-javascript-to-typescript/) Chris Frewin [How to Build a Custom Component Button in React](https://sohnya.hashnode.dev/how-to-build-custom-component-button-in-react) Sonia Uduma [How to Develop a Serverless Chatbot with AWS Amplify, Amazon Lex & React](https://sandro.volpee.de/how-to-develop-a-serverless-chatbot-with-aws-amplify-amazon-lex-and-react) — No data science or NLP knowledge needed. Sandro Volpicella [Adding a CSV and JSON File Downloading Feature to a React App](https://theroadtoenterprise.com/blog/how-to-download-csv-and-json-files-in-react) Thomas Findlay 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/vkw6fy6pigcbiuhfz4uw.jpg)](https://www.npmjs.com/package/react-web-editor) [react-web-editor: A WYSIWYG Editor System for React Apps](https://www.npmjs.com/package/react-web-editor) — A library for creating WYSIWYG editors complete with resizable and draggable elements, plus included rich text editing support. CHEWCHEWW [Colorwaver: An Automated Color Palette Detection Mobile App](https://github.com/mrousavy/Colorwaver) — Simply point your mobile device at anything and this clever app will generate the appropriate colour palette for what is being viewed, as shown [in this demo](https://twitter.com/mrousavy/status/1431619738673860611). If you want to see the codebase for a complete React Native app with optimized extra backend code, this is a good place to start. Marc Rousavy [[Guide\] Ship Fast. Stay Ahead of the Competition](https://learn.launchdarkly.com/digital-transformation/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q3-cooperpress&utm_content=ebook_adt) LaunchDarkly sponsor [React Render Tracker](https://github.com/lahmatiy/react-render-tracker) — A tool to discover performance issues related to unintentional re-renders and unmounts. Roman Dvornov [React Recipes](https://github.com/craig1123/react-recipes) — As a complement to [beautiful-react-hooks](https://github.com/antonioru/beautiful-react-hooks) we covered in [254](https://react.statuscode.com/issues/254), here’s yet another collection of hooks which may save you from writing a custom hook of your own. Craig Walker [use-cannon](https://github.com/pmndrs/use-cannon) — What makes an animation look 'real'? One big thing can be _physics,_ such as provided by these hooks for [React Three Fiber](https://docs.pmnd.rs/react-three-fiber). The [ping pong](https://cannon.pmnd.rs/#/demo/Pingpong) demo illustrates the principle well. Poimandres [Reactant](https://github.com/unadlib/reactant) — Ever wish that React was more like [Angular](https://angular.io)? Controversial.. but this React framework was inspired by such an idea. Michael Lin ## ⚡️ Quick Bits: - [react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor) — [Monaco](https://github.com/Microsoft/monaco-editor) is the name for the code editor used within [Visual Studio Code](https://code.visualstudio.com). Here it is, presented as a React component. - [react-native-iap](https://github.com/dooboolab/react-native-iap) — Access the basic in-app purchase capability on Android or iOS. - [use-resize-observer](https://github.com/ZeeCoder/use-resize-observer) — Detect element resizing as illustrated in the [demo](https://codesandbox.io/s/nrp0w2r5z0). - [Chartbrew](https://github.com/chartbrew/chartbrew) — Create beautiful charts directly from connected databases. 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