React.js: Possible to assign useState() outside function component? - reactjs

Question

Is there any syntax that would allow assigning useState outside of the function component? I have tried this so far but it has not worked:
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function App() {
useEffect(() => setStateData("from useEffect"), []);
return <div className="App">{stateData}</div>;
}
const [stateData, setStateData] = App.useState("default value"); // fails
// const [stateData, setStateData] = App.prototype.useState("default value"); // also fails
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
CodeSandbox:

Answer 1

Disclaimer: This is an anti-pattern. If you wanna share state there's better ways, but just for info…
You can use the useState's update function outside of a component by assigning it to a variable. Just be sure to clear it when the component unmounts.
/* Reference to hold the update function */
let updateOutside
function App() {
const [state, update] = useState()
useEffect(() => {
/* Assign update to outside variable */
updateOutside = update
/* Unassign when component unmounts */
return () => updateOutside = null
})
return `App State: ${state}`
}
if (updateOutside) updateOutside(/* will re-render App */)

Answer 2

Is there any syntax that would allow assigning useState outside of the function component?
If you take a look at the docs and Rules of Hooks
Only Call Hooks from React Functions
Don’t call Hooks from regular JavaScript functions. Instead, you can:
✅ Call Hooks from React function components.
✅ Call Hooks from custom Hooks (we’ll learn about them on the next page).
So... no, you can't use useState outside of a functional component.

Answer 3

If you want to use useState outside of components think about using https://jotai.org/
It's useState replacement with some additional bonuses
import { atom, useAtom } from 'jotai'
// Create your atoms and derivatives
const textAtom = atom('hello')
const uppercaseAtom = atom(
(get) => get(textAtom).toUpperCase()
)
// Use them anywhere in your app
const Input = () => {
const [text, setText] = useAtom(textAtom)
const handleChange = (e) => setText(e.target.value)
return (
<input value={text} onChange={handleChange} />
)
}
const Uppercase = () => {
const [uppercase] = useAtom(uppercaseAtom)
return (
<div>Uppercase: {uppercase}</div>
)
}
// Now you have the components
const App = () => {
return (
<>
<Input />
<Uppercase />
</>
)
}