--- title: "The future of rendering in React" publication: "React Status" issue: 309 published_at: "2022-10-12" canonical_url: "https://react.statuscode.com/issues/309" --- Plus SWR 2.0's first release candidate, and a powerful 'almost headless' table library. | #​309 — October 12, 2022 [Read on the Web](https://react.statuscode.com/issues/309) Together with [![Progress KendoReact\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_350,h_70/e_make_transparent/co_white,e_outline:7/jbordi93vmfnags8lh02.png)](https://www.telerik.com/blogs/how-to-implement-react-upload-dropzone-component?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-general&utm_content=primary-blog-how-to-implement-react-upload-dropzone-component) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/zpyvo3ibwiahjg3ebmcu.jpg)](https://react-table-library.com/) [React Table Library: An 'Almost Headless' Table Library](https://react-table-library.com/) — Has an interesting [showcase site](https://react-tables.com/) showing off what you can do with it. It’s happy both client and server-side, supports TypeScript, and promises a ‘pleasant developer experience’ (not least by having [a whole bunch of blog posts](https://www.robinwieruch.de/categories/react-table-library/) on how to use it). Robin Wieruch [The Future of Rendering in React](https://prateeksurana.me/blog/future-of-rendering-in-react/) — This kicks off with a review of current patterns (CSR/SSR) and then moves on to some of the new rendering patterns such as streaming SSR and server components. This was also the basis of a [recent talk](https://www.youtube.com/watch?v=6wsw6eKdIOM) at _React Bangalore._ Prateek Surana [![\](https://copm.s3.amazonaws.com/bbbeb94d.png)](https://www.telerik.com/blogs/how-to-implement-react-upload-dropzone-component?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-general&utm_content=primary-blog-how-to-implement-react-upload-dropzone-component) [How To Bind Any Component to Data in React: One-Way Binding](https://www.telerik.com/blogs/how-to-implement-react-upload-dropzone-component?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-general&utm_content=primary-blog-how-to-implement-react-upload-dropzone-component) — If you want to learn more about data binding, types, how to utilize useState and useRef to bind data in React, take a look at this blog post and read on. Progress KendoReact sponsor [A Semantic HTML Trick for React Components](https://queen.raae.codes/emails/2022-10-10-semantic-react/) — Make the HTML element around a component configurable through the component’s props so that you can use the right semantic tag when needed. Queen Raae **IN BRIEF:** - The [Next.js Conf speakers](https://nextjs.org/conf/speakers) have been revealed – the [event itself](https://nextjs.org/conf) takes place online on October 25. - 🔥 A developer [unveiled an interesting project on Hacker News](https://news.ycombinator.com/item?id=33134059) earlier this week called _Reflame_, which offers a way to deploy React apps 'in milliseconds.' The resulting discussion was quite interesting. ([Screencast demo.](https://www.youtube.com/watch?v=SohUnrjiIxk)) [How to Build SVG Line Charts with React, SSR and Tailwind CSS](https://thenewstack.io/how-to-build-svg-line-charts-with-react-ssr-and-tailwind-css/) — A tutorial on how to roll your own SVG based line charts in a server-side rendered React app based around either Next.js or Gatsby. Paul Scanlon [Material UI in Storybook](https://storybook.js.org/blog/material-ui-in-storybook/) — Tips to get the most out of Material UI with Storybook Shaun Lloyd 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/mvlm8cpzissj27xiocdr.jpg)](https://www.npmjs.com/package/react-modern-audio-player) [React Modern Audio Player: Simple, Visual Audio Player](https://www.npmjs.com/package/react-modern-audio-player) — wavesurfer.js provides a waveform for seeing just what you’re playing. There’s [a live Codesandbox demo](https://codesandbox.io/s/basic-91y82y?file=/src/App.tsx) to see how it looks and is used. [GitHub repo.](https://github.com/slash9494/react-modern-audio-player) LYH [OsmiCSX 1.0: A React Native Styling Framework](https://osmicsx.dev/) — One for Tailwind CSS fans, perhaps. _“We adopted the Tailwind concept and implement it for styling in React Native.”_ OsmiCSX [Offline Support for React Native Is Here! Try V5 of Stream's Chat SDK](https://getstream.io/blog/react-native-sdk-v5/?utm_source=ReactStatus&utm_medium=Promoted_Newsletter&utm_content=Developer&utm_campaign=ReactStatus_October2022_ReactNativeBlogSDK_klmh22) Stream sponsor [lightGallery 2.7: Modular Image and Video Lightbox Gallery](https://www.lightgalleryjs.com/) — Works with React, Vue, Angular, and TypeScript. [Demos here](https://www.lightgalleryjs.com/demos/thumbnails/) or the [GitHub repo.](https://github.com/sachinchoolur/lightGallery) _(Note: GPLv3 plus commercial licensing.)_ Sachin N [xoid: Framework-Agnostic State Management](https://xoid.dev/) — There is, of course, a React integration in the shape of `useAtom` Docusaurus **QUICK RELEASES:** - [SWR 2.0 Release Candidate](https://github.com/vercel/swr/releases/tag/2.0.0-rc.0) ↳ Popular data fetching hook. Pre-release of v2. - [xstyled 3.7](https://xstyled.dev/) ↳ Utility-first CSS-in-JS framework. - [react-medium-image-zoom 5.1](https://github.com/rpearce/react-medium-image-zoom) ↳ Medium․com-esque image zooming component. ([Demos.](https://rpearce.github.io/react-medium-image-zoom/?path=/story/galleries--image-gallery)) - [React Awesome Reveal 4.1](https://react-awesome-reveal.morello.dev/) ↳ Intersection API triggered reveal animations. - [Fortune Sheet 0.7](https://github.com/ruilisi/fortune-sheet) ↳ Google Sheets-a-like component. ([Demo.](https://ruilisi.github.io/fortune-sheet-demo/?path=/story/features--basic)) - [React Image Crop 10.0.8](https://github.com/DominicTobias/react-image-crop) ↳ Responsive image cropping component. - [eslint-plugin-react 7.31.10](https://github.com/jsx-eslint/eslint-plugin-react) ↳ React-specific rules for ESLint. Jobs [React Developer at Cisco (Remote in Europe)](https://jobs.cisco.com/jobs/ProjectDetail/Frontend-developer-Engineer/1376507?ref=joblist.app) — Join the Cyber Vision team where we develop a leading cyber-security solution tailored for industrial customers and help us build our future versions. Cisco [Software Engineer (Security)](https://www.stickermule.com/career/2482befb-4aa7-4372-98d7-042aaf774315) — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers. Sticker mule [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 This issue was curated by Terence C. Gannon and Peter Cooper 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