disable useSelector re-rendering

[arashi-dev]

hello

I have a function in my hook which gets a data from redux and do some stuff with it.
something like this:

const useMyHook = () => {
    const myReduxState = useSelector(state => state)

    const func = () => {
        postData(myReduxState)
    }

    return { func }
}

so, in this example, I don't need to re-render the component every time states update. because I only want to get it when the function gets called.

this is what I've figured out to do with the help of refs:

const useMyHook = () => {
    const myReduxStateRef = useRef()

    useSelector(state => {
        myReduxStateRef.current = state
        return null
    })

    const func = () => {
        postData(myReduxStateRef.current)
    }

    return { func }
}

now, my question is, is it a bad practice?

[markerikson]

Very bad, and you should never do this!.

If you only need that value when the function gets called, move the logic into a thunk and dispatch the thunk from a React event handler:

https://redux.js.org/usage/writing-logic-thunks