React - Prevent re-render whole list when delete element

Question

I'm working on a toasts notifications system using React v17 and the React context API. I'm NOT using Redux.

The problem:

Toasts are dismissed automatically after a given delay. The toast element which is dismissed is removed from the list from the context. The problem is that each Toast component is re-render, the whole list is re-render, each time the list change.

I don't want that each component be re-rendered. Only the dismissed Toast component should be "re-render", understand deleted from the list displayed.

I put key attribute on my Toast components but it doesn't work as I expected it would.

Thank you for helping me !

The code below:

function Layout() {

    const toastsContext = useContext(ToastsContext);
    const toastsList = toastsContext.toastsList;

    const [list, setList] = useState([]);

    useEffect(() => {
        setList(toastsList);
    }, [toastsList]);

    const displayToasts = list.map(toast => 
        <Toast
        key={toast.id.toString()}
        id={toast.id}
        color={toast.color}
        title={toast.title}
        message={toast.message}
        dismissable={toast.dismissable}
        showTime={toast.showTime}
        autoDismissDelay={toast.autoDismissDelay}
        redirectTo={toast.redirectTo} />
    );

    return(
        <div className='bg-slate-800 text-slate-400 min-h-screen relative'>
            <Header />
            <Outlet />
            <div className='fixed top-20 right-4 flex flex-col gap-2'>
                {displayToasts}
            </div>
        </div>
    );

}
export default Layout;

Toast component

import { memo, useCallback, useContext, useEffect, useState } from "react";
import { ToastsContext } from "../context/ToastsContext";
import { FiX, FiArrowRight } from 'react-icons/fi';
import { Link } from "react-router-dom";

function Toast({id, color, title, message, dismissable, autoDismissDelay, showTime, redirectTo}) {

    const toastsContext = useContext(ToastsContext);

    const [hiddenToast, setHiddenToast] = useState(false);

    const getToastColor = () => {
        switch (color) {
            case 'primary':
                return 'bg-sky-500';
            case 'danger':
                return 'bg-rose-500';
            case 'success':
                return 'bg-green-500';
            default:
                return 'bg-sky-500';
        }
    };

    const dismissToast = useCallback(() => {
        setHiddenToast(true);
        setTimeout(() => {
            document.getElementById(`toast${id}`).className = 'hidden';
            toastsContext.dismissToast(id);
        }, 310);
    }, [id, toastsContext]);

    useEffect(() => {
        const interval = setInterval(() => {
            dismissToast();
        }, autoDismissDelay);
        return () => {
            clearInterval(interval);
        }
    }, [autoDismissDelay, dismissToast]);

    return(
        <div id={'toast'+id} className={`transition ease-out duration-300 text-slate-50 text-sm rounded-lg drop-shadow-lg opacity-100 ${getToastColor()} ${hiddenToast ? 'translate-x-20 opacity-0' : ''}`}>
            <div className="w-72">
                <div className={`${(redirectTo && redirectTo !== '') || (message && message !== '') ? 'py-2' : 'py-4'} px-4 flex font-semibold items-center`}>
                    <p>{title}</p>
                    <div className="ml-auto flex items-center">
                        {showTime ? <p className="text-xs mr-3">11m ago</p> : null}
                        {dismissable ?
                            <button type="button" className="flex items-center justify-center text-base" onClick={dismissToast}>
                                <FiX />
                            </button>
                            : null
                        }
                    </div>
                </div>
                {
                    redirectTo && redirectTo !== '' ?
                    <Link className={`border-t border-slate-700 bg-slate-800 rounded-b-lg px-4 py-3 font-medium hover:bg-slate-700 block`} to={redirectTo}>
                        <p className="flex items-center justify-between">
                            <span>{message ? message : 'See more'}</span>
                            <FiArrowRight />
                        </p>
                    </Link>
                    :
                    message ?
                    <div className={`border-t border-slate-700 bg-slate-800 rounded-b-lg px-4 py-3 font-medium`}>
                        <p className="flex items-center justify-between">
                            <span>{message}</span>
                        </p>
                    </div>
                    : null
                }
            </div>
        </div>
    );

};
export default memo(Toast);

Answer 1

That's the default behavior in react: When a component (eg, Layout) re renders, so to do all its children (the Toasts). If you want to skip rendering some of the toasts, then Toast will need to use React.memo. Also, for the memoization to work, the props to each Toast will need to stay the same from one render to the next. From looking at your code i think that will happen without any changes, but it's important to know so you don't think memo is enough on its own.

import { memo } from 'react';

function Toast() {
  // ...
}

export default memo(Toast);