Slider component doesn't have updated state value

[IDrumsey]

What package has an issue

@mantine/core

Describe the bug

Using version @mantine/core@5.6.2

I have a state variable that I am updating with a typical button press onClick event handler. When I console the state value from a slider's onChange event handler, it doesn't print the updated value, but a Button component does print the updated value.

In the sandbox, click the first button to update the state. Click the second button and view the console to see it's printing the correct value. Then click the slider to see that it's printing the old value.

What version of @mantine/hooks page do you have in package.json?

5.6.2

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/charming-lena-2f2hly?file=/src/App.js

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

No response

[rtivital]

It is not planned to fix this issue soon, I can only advise not to use state variables in Slider onChange method

[tagdara]

Does this mean the controlled example in the docs is also broken? https://mantine.dev/core/slider/#controlled
Surely this is a very normal use case - is there a workaround?

I rolled back to 5.5.6, which loses a lot of your other nice work, but I have sliders in a lot of places to control volume, and they need to be controlled in order for other sources to update them.

[rtivital]

Nope, these are two separate issues, see this PR to learn more about the issue that was introduced recently #2839

[cyantree]

The issue is quite old but because the underlying mechanism hasn't changed here are two approaches for dealing with them:

• Manage the state variable also with useRef() to always access its current value
• Manage your callback via useRef() and call it within your handler

Both approaches can be seen here:
https://codesandbox.io/s/sad-matan-43d005?file=/src/App.js

@rtivital Would this be a nice addition for @mantine/hooks? I use it quite frequently to work around such issues and also reduce the need for rerenderings.

import { useRef } from 'react';

export function useLiveRef<T>(value: T) {
    const ref = useRef(value);
    ref.current = value;

    return ref;
}

[FinnRG]

Was this resolved by #4497?