Use React hooks

The goal is to convert most of our components to React Hooks for simplicity. Not all components need to be converted to React Hooks, only those where it makes sense (Stateless, simple state/lifecycle needs). For all Pull Requests, make sure:

• no tests are removed. We want to maintain coverage. Keep in mind, our testing library Enzyme has some notable issues with React Hooks. Check their issue to see if your changes fall into this bucket.
• coverage for the component is well-handled. It’s not worth refactoring if the component has good coverage originally.

Here’s a tracker for all of the components grouped by their folder.

core

• Block - Not worth changing
• Countdown - Uses State
• MainMenu - Uses State
• MainMenu / ScreencastOption
• Maybe - Uses shouldComponentUpdate
• ReportView - https://github.com/streamlit/streamlit/pull/1823
• Sidebar - Uses State
• StatusWidget - Uses State
• StreamlitDialog - Complex and uses state in some cases

elements

• Alert - https://github.com/streamlit/streamlit/pull/1795
• Audio - https://github.com/streamlit/streamlit/pull/1795
• Balloons - Uses State
• BokehChart - https://github.com/streamlit/streamlit/pull/1795
• CodeBlock - https://github.com/streamlit/streamlit/pull/1795
• CodeBlock/CopyButton - Uses State
• DataFrame
• DeckGlChart Going to be deprecated infavor of DeckGlJsonChart
• DeckGlJsonChart - Uses State
• DocString - https://github.com/streamlit/streamlit/pull/1795
• ExceptionElement - https://github.com/streamlit/streamlit/pull/1795
• Favicon
• GraphVizChart - https://github.com/streamlit/streamlit/pull/1795
• IFrame - https://github.com/streamlit/streamlit/pull/1795
• ImageList - https://github.com/streamlit/streamlit/pull/1795
• Json - https://github.com/streamlit/streamlit/pull/1795
• Markdown - https://github.com/streamlit/streamlit/pull/1795
• PlotlyChart - https://github.com/streamlit/streamlit/pull/1795
• Progress - Uses State
• Table - https://github.com/streamlit/streamlit/pull/1795
• Text - https://github.com/streamlit/streamlit/pull/1795
• VegaLiteChart - Uses State
• Video - https://github.com/streamlit/streamlit/pull/1795

shared

• ErrorBoundary - support for componentDidCatch is limited
• ErrorElement - https://github.com/streamlit/streamlit/pull/1817
• FullScreenWrapper - Uses State
• Icon
• InputInstructions
• StreamlitMarkdown - support for componentDidCatch is limited

widgets

• Button - https://github.com/streamlit/streamlit/pull/1817
• Checkbox - Uses State
• ColorPicker - Uses State
• CustomComponent - Uses State
• DateInput - Uses State
• FileUploader - Postponed
• MultiSelect - Uses State
• NumberInput - Uses State
• Radio - Uses State
• Selectbox - Uses State
• Slider - Uses State
• TextArea - Uses State
• TextInput - Uses State
• TimeInput - Uses State

[randyzwitch]

Hi @tanmaylaud -

We don’t have a public Gitter channel or anything where these things are discussed; to be honest, we haven’t had anyone who wanted to contribute to such a large piece of the project before 😃

Can you send me an email so that I can further understand your background and your interests?

[kmcgrady]

All components with the above criteria have been converted to React Hooks. If any other components get refactored, the developer has the option to convert to a React Hook if they like.

Closing this issue. Thanks again to @tanmaylaud for helping get this to the finish line!