Should I know React ?

Much has been written on the subject of React’s steep learning curve, therefore I went into the custom component beta with the thought that 6 months of Vue.js years ago would not cut it to write awesome Streamlit components.

React is a JavaScript library dedicated to the “view” layer of your web application and provides you with a template engine and lifecycle hooks focused on rendering in the browser. You can encapsulate frontend code into a reusable “component” with its own state and logic, and React will then render and manage multiple components in the browser.

While React is known for building performant UI blocks, there are some other aspects that should be considered:

• React relies on many other libraries to run all that is outside the “view” layer (like routing or authentication, which come natively in other JS frameworks), so one needs a good knowledge of the React ecosystem to implement a fully-fledged web application; and,
• React can get pretty difficult to optimize when multiple components interact with each other, such as when transferring information or dispatching callbacks to deep-nested children elements.

Fortunately for us React beginners, Streamlit deals with all of the “harder parts” of writing a web app in React, like routing, event management, responsive app layout, error handling, and global state management for all rendered components.

Plus, given Streamlit’s design, a component cannot call nor interact with other components using callbacks. In the same way that you can write a Streamlit script without callbacks between components, you can write a frontend component code without worrying about its behavior if other widgets on the same page call it.

Writing a React custom component for Streamlit makes for a less-demanding effort and provides a visibly rewarding experience. React gets out of your way pretty quickly once you establish the structure of your component, and Streamlit components become JavaScript logic around React’s lifecycle. Thanks to React, you don’t have to worry too much about DOM manipulation and mutation.

Learning basic React also gives you access to a massive ecosystem of React components already written by the community, all which you can wrap inside Streamlit to build your very custom data web app experience!