public properties when using React hooks - react-hooks

Question

a start-up component can new a class and set values of some public properties in it to be used later in methods of same class.
What will be the equivalent of this in a hook component? Should these properties be added to a context and read from there? Is there a simpler option?
Thank you

Answer 1

If this are constant properties, you can define consts inside or outside the component.
const noOfItems = 5
const Comp = () => {
const items = 'cats'
return (
<div>{noOfItems} {items }></div>
)
}
If the values can change, and changing them causes re-render, then you should use useState or useReducer:
const Comp = ({ items }) => {
const [noOfItems, setNoOfItems] = useState(0)
return (
<>
<div>{noOfItems} {items}></div>
<button onClick={() => setNoOfItems(x => x + 1)}>
Add Items
</button>
</>
)
}
And if it's something you wish to mutate, but changing it won't cause re-render, you can do so with useRef:
const Comp = ({ items, doSomething }) => {
const [noOfItems, setNoOfItems] = useState(0)
const fn = useRef() // fn would be preserved between renders, and mutating it won't cause re-renders
useEffect(() => {
fn.current = doSomething // changing this won't cause a re-render
});
useEffect(() => {
fn.current(noOfItems)
}, [noOfItems])
return (
<>
<div>{noOfItems} {items}></div>
<button onClick={() => setNoOfItems(x => x + 1)}>
Add Items
</button>
</>
)
}
Although not public, you can can also keep variables (and consts) inside a closure - for example useEffect, as long as it's not invoked again:
const Comp = ({ items }) => {
const [noOfItems, setNoOfItems] = useState(0)
useEffect(() => {
const interval = setInterval(() => /* do something */) // the interval would preserved in the closure at it ins't called again
return () => clearInterval(interval)
}, [])
return (
<>
<div>{noOfItems} {items}></div>
<button onClick={() => setNoOfItems(x => x + 1)}>
Add Items
</button>
</>
)
}