如何减少React Partners组件因URL参数导致的额外渲染？

问题根源 #

你的组件出现额外渲染是因为两个useEffect形成了不必要的联动：

• 组件挂载时，第一个useEffect读取URL参数并更新store，触发组件重新渲染（因observer监听store变化）。
• 渲染后第二个useEffect检测到store的page/limit变化，直接更新URL参数，若此时URL参数和store值已一致，仍会触发无意义的URL更新，进而导致组件再次渲染。
• 同时未对URL参数做类型转换（searchParams.get返回字符串），可能导致后续比较逻辑失效，触发多余更新。

优化步骤 #

1. 初始同步URL参数到store时，先做值的一致性判断：仅当URL参数和当前store值不同时，才更新store，避免无意义的store变更。
2. 更新URL参数时，先对比当前URL值与store值：仅当两者不一致时才调用setSearchParams，避免不必要的URL更新。
3. 类型转换处理：将URL获取的字符串参数转为数字，确保和store中的数值类型一致，避免因类型差异导致的误判。

修改后的代码 #

const Partners = () => {
    const { allPartners } = useLoaderData();
    const { store } = useContext(Context);
    const navigate = useNavigate();

    const {
        setPage, setLimit, page, limit,
    } = store;

    const [searchParams, setSearchParams] = useSearchParams();

    useEffect(() => {
        // 转换URL参数为数字，设置默认值
        const urlPage = Number(searchParams.get('page')) || 1;
        const urlLimit = Number(searchParams.get('limit')) || 10;
        
        // 仅当参数不一致时更新store
        if (urlPage !== page) {
            setPage(urlPage);
        }
        if (urlLimit !== limit) {
            setLimit(urlLimit);
        }
    }, [page, limit, searchParams, setPage, setLimit]);

    useEffect(() => {
        // 获取当前URL参数并转成数字
        const currentUrlPage = Number(searchParams.get('page')) || 1;
        const currentUrlLimit = Number(searchParams.get('limit')) || 10;
        
        // 仅当store值与URL参数不一致时更新URL
        if (page !== currentUrlPage || limit !== currentUrlLimit) {
            setSearchParams({
                page: String(page),
                limit: String(limit),
            });
        }
    }, [page, limit, searchParams, setSearchParams]);

    const addBtnHandler = () => {
        navigate('new_partner');
    };

    console.log('render');

    return (
        <div className='page'>
            <Filters />
            <Suspense fallback={<Loader />}>
                <Await resolve={allPartners}>
                    <PartnersTable />
                    <Pagination />
                    <Button children={'Додати'} onClick={addBtnHandler} />
                    <Outlet />
                </Await>
            </Suspense>
        </div>
    );
};

export default observer(Partners);

额外优化点 #

• 修正了Button组件的onclick为React规范的onClick（React事件需大写首字母）。
• 第一个useEffect的依赖数组添加了page、limit、searchParams，确保用户手动修改URL地址栏时，组件能同步更新store值。

内容的提问来源于stack exchange，提问作者Victor