React hook reference is lost when its called outside of React components

Question

The following code used to work in earlier versions of ReactJS but now it seems useSnackbarRef loses its value and is undefined inside handler function, what has changed in React and how can I fix this utility?
The goal of the utility is to enable me to call enqueueSnackbar from outside of react components.

import { useSnackbar } from 'notistack';

let useSnackbarRef;
export const SnackbarUtilsConfigurator = () => {
    useSnackbarRef = useSnackbar();
    return null;
};

const handler = {
    success(msg) {
        this.toast(msg, { variant: 'success' });
    },
    warning(msg) {
        this.toast(msg, { variant: 'warning' });
    },
    info(msg) {
        this.toast(msg, { variant: 'info' });
    },
    error(msg) {
        this.toast(msg, { variant: 'error' });
    },
    toast(msg, { variant = 'default', ...restProps }) {
        useSnackbarRef.enqueueSnackbar(msg, { variant, autoHideDuration: 2000, ...restProps });
    },
};

export default handler;

Please note I also render SnackbarUtilsConfigurator inside my app.js like this:

<SnackbarUtilsConfigurator />

@kennarddh It was possible in previous reacts, I also render SnackbarUtilsConfigurator inside my reactjs, infact this code is copied from here: https://dev.to/sakiblite/how-to-use-notistack-snackbar-outside-of-react-components-3ln1 — Ali Ahmadi, Apr 19 '23 at 10:29
@kennarddh My previous version was 16.8 and the current is 18.2. — Ali Ahmadi, Apr 19 '23 at 11:17
I found the issue, it was a problem with my Context Providers priority, the code still works fine without any issues. — Ali Ahmadi, Apr 19 '23 at 15:21

score 0 · Answer 1 · answered Apr 19 '23 at 11:57

You cannot call hook outside a react component

You can wrap useSnackbar as new hook

import { useSnackbar } from 'notistack'

const useToast = () => {
  const SnackBar = useSnackbar();

  const Toast = useCallback((message, snackProps) => SnackBar.enqueueSnackbar(message, {
    autoHideDuration: 2000,
    ...snackProps
  })), [SnackBar])

  const Success = useCallback((message) => Toast(message, {
    variant: 'success'
  }), [Toast])

  const Warning = useCallback((message) => Toast(message, {
    variant: 'warning'
  }), [Toast])

  const Info = useCallback((message) => Toast(message, {
    variant: 'info'
  }), [Toast])

  const Error = useCallback((message) => Toast(message, {
    variant: 'error'
  }), [Toast])

  return {
    Toast,
    Success,
    Warning,
    Info,
    Error,
  }
}

You can use it like this

const OtherComponent = () => {
  const { Success } = useToast()

  // You can call it here Success("message")
}

React hook reference is lost when its called outside of React components

1 Answers1