Open ngvcanh opened 1 year ago
This package has issues:
In ToastProvider, you make state:
ToastProvider
const [toasts, setToasts] = React.useState<FullToastConfig[]>([]) // line 49
And when has a new toast, this state will be update, ToastProvider re-render, that mean children also re-render. This is an error of performance.
Should make the component as children of ToastProvider (Ex: ToastContainer) manage toasts state. This component is ForwardRefExoticComponent.
ToastContainer
toasts
ForwardRefExoticComponent
When add toast, let call add function from ref of ToastContainer
ref
In Context.tsx, I suggest code:
Context.tsx
const ToastProvider: React.FC<Omit<ToastContextType, 'toast'>> = ({
change to:
export type ToastProviderProps = Omit<ToastContextType, 'toast'>; const ToastProvider: React.FC<PropsWithChildren<ToastProviderProps >> = ({
This package has issues:
Re-render all app when add new a toast
In
ToastProvider
, you make state:And when has a new toast, this state will be update, ToastProvider re-render, that mean children also re-render. This is an error of performance.
Should make the component as children of
ToastProvider
(Ex:ToastContainer
) managetoasts
state. This component isForwardRefExoticComponent
.When add toast, let call add function from
ref
ofToastContainer
Support children for React 18
In
Context.tsx
, I suggest code:change to: