---
title: "Refine: A React-based framework for data-intensive apps"
publication: "React Status"
issue: 259
published_at: "2021-10-06"
canonical_url: "https://react.statuscode.com/issues/259"
---

Plus a tale of moving from React to SvelteKit, and some React philosophies. |        

#​259 — October 6, 2021 

[Read on the Web](https://react.statuscode.com/issues/259)   React Status ⚛️ Your weekly React news digest, _every Wednesday_.  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/kjo9exfitvegzpkzjcao.jpg)](https://reaviz.io/?path=/story/docs-intro--page)  

[REAVIZ 11.1: A D3.js-Based React Data Visualization Library](https://reaviz.io/?path=/story/docs-intro--page) — Definitely worth a look if you want to create elaborate charts and plots. From the same team as the [REAFLOW](https://reaflow.dev/?path=/story/docs-introduction--page) Node-based diagramming library. [GitHub repo](https://github.com/reaviz/reaviz). 

REAVIZ   

[React Native 0.66 Released](https://reactnative.dev/blog/2021/10/01/version-066) — [Highlights](https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#highlights) include support for Hermes 0.9.0, taps on views outside the parent, better support for Apple Silicon, iOS 15 and Xcode 13, along with new Bluetooth permissions for Android. As you would expect, there are also a small number of [breaking changes](https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#breaking). 

Facebook   [![\](https://copm.s3.amazonaws.com/a63776db.png)](https://www.telerik.com/blogs/react-dashboard-tutorial-build-interactive-dashboard?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-dashboard-tutorial&utm_content=primary) 

[How To Build an Interactive Dashboard with React (Tutorial)](https://www.telerik.com/blogs/react-dashboard-tutorial-build-interactive-dashboard?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-dashboard-tutorial&utm_content=primary) — Learn how to build a sleek-looking, interactive dashboard using the TileLayout. Check out all you can do with this deceptively simple component: drag, order and toggle dashboard widgets, create dynamically configurable tiles and more. [Check it out](https://www.telerik.com/blogs/react-dashboard-tutorial-build-interactive-dashboard?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-dashboard-tutorial&utm_content=primary). 

Progress KendoReact sponsor   

[Refine: A Framework for Data Intensive Applications](https://refine.dev/) — Need both speed _and_ flexibility? This zero-configuration framework is well-suited to admin panels, B2B applications and dashboards. Refine uses the [Ant Design System](https://ant.design/) (though support for other UI libraries is coming in due course) but derives its power by being strongly opinionated in regard to API networking, state management and authentication/authorization. 

Pankod   

[How to Build an Inline Edit Component in React](https://www.emgoto.com/react-inline-edit/) — If you want to offer the ability for users to edit content ‘in place’ without navigating to a specific edit screen, this is for you. 

Emma Goto   

[React Philosophies: Simple, Practical, Easy-to-Follow Guidelines](https://github.com/mithi/react-philosophies) — This developer indentifies the seminal thinkers who impacted her careeer growth and then boils their respective philosophies down so they can easily be incorporated into _your_ project. 

Mithi Sevilla    

Jobs  

[React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-react&utm_content=react) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. 
X-Team   

[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      

[Faster React Apps with Memoization](https://blog.px.dev/ui-performance/) — You have a sluggish React web app on your hands. How do you fix it? Nick looks at resolving a problem with excessive re-rendering here. 

Nick Lanam   

▶[From React to SvelteKit](https://syntax.fm/show/390/from-react-to-sveltekit) — The two hosts of the popular Syntax webdev podcast talk about moving a site from using React to [SvelteKit](https://kit.svelte.dev/) and why it made sense. _(55 minutes.)_ 

Syntax Podcast podcast   

[The Complete Guide to PropTypes in React](https://t.co/77MTBs1s58?amp=1) — Not using TypeScript, yet want to realize at least some of the benefits of strong typing? Why not avail yourself of React’s built-in type-checking facility. 

Haseeb Anwar   

▶[Open-Source Documentation: Tales from React and React Native](https://www.youtube.com/watch?v=SgM2lEjCyAY) — In the talk she intended to present in person at React Finland 2021, Rachel makes the case for paying closer attention to that which is usually an afterthought in the open-source development process—all while wearing Finnish _saunahattu._ 

Rachel Nabors  

🛠 Code and Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/yq5qxnhan1n9nx6v7kk3.jpg)](https://github.com/bootrino/reactoxide)  

[React Oxide: Add a Code Editor to Your React Project](https://github.com/bootrino/reactoxide) — It’s billed as a ‘minimal editor’ but it could likely do most of what you need, if you want a lightweight IDE-appearing experience, as illustrated in this [short video](https://www.youtube.com/watch?v=OmxKAWeN38I) or [live demo](https://www.reactoxide.com/). 

Andrew Stuart   

[Reactronica: Roll Your Own GarageBand?](https://github.com/unkleho/reactronica) — It won’t likely do that, exactly, but it does a good job of illustrating the basic principles for “making music in the browser”. The [DAW demo](https://reactronica.com/daw) is quite impressive. 

Kaho Cheung   

[Monitor Lighthouse Scores and Core Web Vitals for Your React App](https://www.debugbear.com/?utm_campaign=reactstatus) 

DebugBear sponsor   

[schummar-translate: TypeScript-Powered Translation](https://github.com/schummar/schummar-translate) — An interesting and seemingly more flexible (while possibly more labor intensive approach) to implementation of multilingual UIs. 

Marco Schumacher   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/mhu7ysrauiz7tkaeg6go.jpg)](https://github.com/ebs-integrator/ebs-design)  

[EBS Design System: React-Based UI Toolkit for Enterprise Applications](https://github.com/ebs-integrator/ebs-design) — Having been developed as a byproduct of many bespoke, enterprise-level projects for a wide variety of [customers](https://ebs-integrator.com/#Customers), this not-quite-released toolkit is still worth keeping an eye on. 

EBS Integrator   

[React Native Header Views](https://github.com/WrathChaos/react-native-header-view) — A set of five time-saving header views which can also be used individually if your prefer. 

Kuray Ogun   

[react-native-ecommerce: A Minimal React Native E-commerce App Template](https://github.com/codezri/react-native-ecommerce) 

codezri    

## ⚡️ Quick Bits: 

- [react-if](https://github.com/romac/react-if) — Render a component, but only under specified conditions.
- [next-cookie](https://github.com/tokuda109/next-cookie) — A Next.js cookie serializer and deserializer.
- [react-collapsed](https://github.com/roginfarrer/react-collapsed) — Flexibible, collapsible components, as shown in the [demo](https://codesandbox.io/s/magical-browser-vibv2?file=/src/App.tsx).
- [react-hover](https://github.com/cht8687/react-hover) — "Turn anything to a 'hoverable' object"
- [react-native-keychain](https://github.com/oblador/react-native-keychain) — Just out in its eighth major release.          

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