Use React hooks
See original GitHub issueThe 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
- Not worth changingBlock
- Uses StateCountdown
- Uses StateMainMenu
-
MainMenu / ScreencastOption
- UsesMaybe
shouldComponentUpdate
-
ReportView
- https://github.com/streamlit/streamlit/pull/1823 - Uses StateSidebar
- Uses StateStatusWidget
- Complex and uses state in some casesStreamlitDialog
elements
-
Alert
- https://github.com/streamlit/streamlit/pull/1795 -
Audio
- https://github.com/streamlit/streamlit/pull/1795 - Uses StateBalloons
-
BokehChart
- https://github.com/streamlit/streamlit/pull/1795 -
CodeBlock
- https://github.com/streamlit/streamlit/pull/1795 - Uses StateCodeBlock/CopyButton
-
DataFrame
Going to be deprecated infavor ofDeckGlChart
DeckGlJsonChart
- Uses StateDeckGlJsonChart
-
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 - Uses StateProgress
-
Table
- https://github.com/streamlit/streamlit/pull/1795 -
Text
- https://github.com/streamlit/streamlit/pull/1795 - Uses StateVegaLiteChart
-
Video
- https://github.com/streamlit/streamlit/pull/1795
shared
- support forErrorBoundary
componentDidCatch
is limited-
ErrorElement
- https://github.com/streamlit/streamlit/pull/1817 - Uses StateFullScreenWrapper
-
Icon
-
InputInstructions
- support forStreamlitMarkdown
componentDidCatch
is limited
widgets
-
Button
- https://github.com/streamlit/streamlit/pull/1817 - Uses StateCheckbox
- Uses StateColorPicker
- Uses StateCustomComponent
- Uses StateDateInput
- PostponedFileUploader
- Uses StateMultiSelect
- Uses StateNumberInput
- Uses StateRadio
- Uses StateSelectbox
- Uses StateSlider
- Uses StateTextArea
- Uses StateTextInput
- Uses StateTimeInput
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Introducing Hooks - React
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. ... This...
Read more >Using the State Hook - React
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. ... We'll...
Read more >Rules of Hooks - React
Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any...
Read more >useHooks - Easy to understand React Hook recipes
Hooks are a feature in React that allow you use state and other React features without writing classes. This website provides easy to...
Read more >streamich/react-use: React Hooks - GitHub
React Hooks — . Contribute to streamich/react-use development by creating an account on GitHub.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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?
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!