How to avoid warning: Outer scope values like 'userDTO' aren't valid dependencies because mutating them doesn't re-render the component

Question

getTransactions method call need to be called only if user is logged in, but the info about the user will not be visible.

What can I do to force a reload when on other component user log in, and also, how to get rid of the warning?

Outer scope values like 'userDTO' aren't valid dependencies because mutating them doesn't re-render the component

The info comes from Redux.

import { getTransactions } from '../../tikexModule/MyTicket'
import { userDTO } from '../../tikexModule/slices/tikexAPI'
interface MyTicketListProps {}

export default function MyTicketList(props: MyTicketListProps) {
    const [transactionsOrPassTickets, setTransactionsOrPassTickets] =
        useState<TransactionOrPassTicket[]>()
    useEffect(() => {
        if (userDTO()) {
            getTransactions(setTransactionsOrPassTickets, window.location.search)
        }
    }, [userDTO])

userDTO is in slice.ts

export const userDTOS = createSelector(
    [authnResS],
    (authnRes?: AuthnRes) => authnRes?.data
)
export const userDTO = () => useAppSelector(userDTOS)

Answer 1

Dependencies used for useEffect should be defined in inner scope, since you are importing useDto it is from outer scope so it wont be a dependency. You either remove it

Or you create a new variable in inner scope and assign it to userDto like this

export default function MyTicketList(props: MyTicketListProps) {
    const _userDto=userDto
    const [transactionsOrPassTickets, setTransactionsOrPassTickets] =
        useState<TransactionOrPassTicket[]>()
    useEffect(() => {
        if (_userDTO()) {
            getTransactions(setTransactionsOrPassTickets, window.location.search)
        }
    }, [_userDTO])

Answer 2

it's unclear to me what you mean by userDTO, could you elaborate ?

if it's a store value i'd suggest you use useSelector hook to automatically render when it changes.