что закинуть в useEffect что бы он отработал после перерендера компонента

В общем суть такая, на сайте который я делал есть фильтры которые открываются и закрываются и часть из них рендерятся в цикле в зависимости от кастомных фильтров, то есть когда я что-то меняю из этого, все последующие фильтры показывают варианты исходя из отсортированных товаров по этих двух фильтрам и так же могут исчезать так как в них может не быть значений, maxHeight я регулирую через state который забиваю в useEffect при изменении отфильтрованных товаров в этих двух основных фильтрах, вот код

const ProductsFilter = () => {
    // redux toolkit
    const dispatch = useAppDispatch();
    const { filterConfig } = useAppSelector((store) => store.FilterReducer);
    // context
    const filteredProducts = useContext(FilteredContext);
    // state
    const [height, setHeight] = useState(0);
    // ref
    const filterRef = useRef<HTMLDivElement>(null);
   
    useEffect(() => {
        if (!filterRef.current) return;
        const height = filterRef.current.getBoundingClientRect().height;
        console.log("ver-2 - ", height);
    }, [filteredProducts]);

    return (
        <div className="product-filter__content-inner" ref={filterRef}>
            {/* Custom filters */}
            {FilterRouter.map(
                (filter, i) =>
                    filterConfig[filter.name]?.active && <filter.module key={i} />
            )}
            {/* Auto generate filters */}
            {uniqueProperty(filterModules, "name").map(
                ({ name, title, options }, i) => {
                    const globalFilterConfig: IFilterSelectModuleOptions = {
                        excludeEmpty: true,
                        excludeOneValue: true,
                    };

                    return (
                        filterConfig[name]?.active && (
                            <FilterByProperty
                                name={name}
                                title={title || getProductDetailLabel(name)}
                                options={{ ...options, ...globalFilterConfig }}
                                key={i}
                            />
                        )
                    );
                }
            )}
            {/* Очистить фильтры */}
            <div className="product-filter__block product-filter__block__clear">
                <button
                    className="product-filter__block__clear-btn"
                    onClick={() => dispatch(clearFilters())}
                >
                    Очистить фильтр
                </button>
            </div>
        </div>
    );
};

Но проблема в том что высота береться сразу, то есть она забивается в state а после этого компонент перерендеривается так как поменялись отфильтрованные товары и получается что state отстает, думал какой нибудь callback повесить на компонент но не знаю за что цепляться, так как эти фильтры автоматически меняются и высота всего фильтра тоже

filter's screenshot

Изменено:

В общем нашел костыльное решение, вынес state на уровень выше, а в этот компонент закинул это и принимаю checkRender как аргумент

useEffect(() => checkRender(), [checkRender]);

и выше по уровню запускаю его, в таком случае хотя бы получаю реальную высоту думаю такое поведение пока что устроит если кто нибудь не предложит вариант по адекватнее

  function checkRender() {
    if (!productFilterRef.current) return false;

    const pfc_inner = productFilterRef.current.children[0];
    const newHeight = active ? pfc_inner.getBoundingClientRect().height : 0;

    setHeight((prevHeight) =>
      prevHeight !== newHeight ? newHeight : prevHeight
    );
  }

Ответы (0 шт):