I'm trying to find a way to have a variable that causes a re-render when updated (useState is perfect for this), but which I can also use in my separate functions (useRef).
Currently I have to use both like so:
const [value, _setValue] = useState("hello world");
const valueRef = useRef(value);
const setValue = (v) => {
valueRef.current = v;
_setValue(v);
}
But seems like a lot of code for something this trivial. Is there a another way that I'm missing?
-- EDIT --
To clarify what exactly my problem is, if I create a function like below
const [value, _setValue] = useState("hello world");
const valueRef = useRef(value);
const setValue = (v) => {
valueRef.current = v;
_setValue(v);
}
// This logs the initial, not-updated value
const logValue = () => console.log(value);
// This logs the updated value
const logValueRef = () => console.log(valueRef.current);
I want to have 1 variable which combines being updated from valueRef and triggering re-rendering from value so that I don't need to define 2 variables each time.