React useState and useRef needed to have updated values

Viewed 39

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.

0 Answers
Related