This content originally appeared on DEV Community and was authored by Simone Gentili
<Activity /> component
Today I was wondering in new React 19.2 features. For example I have been play with <Activity /> one. Here an example. The example is complete but I'll write few considerations about how to use it.
import { Activity, useState } from 'react'
import './App.css'
function App() {
const [mode, setMode] = useState(true)
return (
<>
<button onClick={() => setMode(!mode)}>
toggle
</button>
<Activity mode={mode === true ? 'hidden' : 'visible'}>
<textarea placeholder="Type something..." rows={4} cols={50} />
</Activity>
</>
)
}
export default App
The old way
I think is good component. It makes more readable and with more features. The old way is this:
import { useState } from 'react'
import './App.css'
function App() {
const [mode, setMode] = useState(true)
return (
<>
<button onClick={() => setMode(!mode)}>
toggle
</button>
{mode && <textarea placeholder="Type something..." rows={4} cols={50} />}
</>
)
}
export default App
But with this syntax, when mode is false, the textarea is removed. This means that the state isnt stored. It is crucial to understand the difference.
Ultimate example
I suggest to use this kind of state variable:
const [mode, setMode] = useState<'visible' | 'hidden'>('visible')
And this function
() => setMode((mode) => (mode === 'visible' ? 'hidden' : 'visible'))
Because the point is to make code more readable as possibile. And I think this is the more readable way to use <Activity /> component.
<Activity mode={mode}>
<textarea placeholder="Type something..." rows={4} cols={50} />
</Activity>
Here the full example.
import { Activity, useState } from 'react'
import './App.css'
function App() {
const [mode, setMode] = useState<'visible' | 'hidden'>('visible')
return (
<>
<button onClick={() => setMode((mode) => (mode === 'visible' ? 'hidden' : 'visible'))}>
toggle
</button>
<Activity mode={mode}>
<textarea placeholder="Type something..." rows={4} cols={50} />
</Activity>
</>
)
}
export default App
My latest books
I am writing a book of notes about React 19.2. I've also published some other books. Italian only at the moment.
JavaScript: https://amzn.to/479R9DG
TypeScript: https://amzn.to/47w7X87
This content originally appeared on DEV Community and was authored by Simone Gentili
Simone Gentili | Sciencx (2025-10-22T20:10:01+00:00) React <Activity /> component. Retrieved from https://www.scien.cx/2025/10/22/react-activity-component/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.