Использование свойства изначально неопределенной переменной для зависимости useEffect

Question

TL; DR: хочу использовать listRef.current.clientWidth для зависимости useEffect.

Я хотел создать список, в котором он автоматически изменяет ширину своего элемента в соответствии с шириной списка. Я так близко, но я не могу обнаружить изменение listRef.current.clientWidth, которое является шириной <div className="dynamic-list">. При первом запуске listRef имеет значение null, поэтому у меня не может быть listRef.current.clientWidth для зависимости useEffect. listRef ? listRef.current.clientWidth : null для зависимости также не работает с use simple dependency warning.

const DynamicList = ({
  dataSource, renderItem, itemMaxWidth, itemHeight,
  margin, height = 500, width = 700 }) => {
  const windowWidth = useWindowDimensions().width; 
  const [itemStyle, setItemStyle] = useState({ width: itemMaxWidth, height: itemHeight });
  const [currentWidth, setCurrentWidth] = useState(null);
  const listRef = useRef();


  useEffect(() => {
    if (listRef) {
      const num = Math.floor(listRef.current.clientWidth / itemMaxWidth)
      console.log(
        num,
        listRef.current.clientWidth,
        listRef.current
      )
      setItemStyle((pre) => ({
        ...pre,
        height: itemHeight,
        margin: margin,
        width: (listRef.current.clientWidth / num) - (margin ? margin * 2 : 0),
      }))
    }

  }, [listRef, windowWidth, itemMaxWidth, margin, itemHeight, width])

  return (
    <div
      className="dynamic-list"
      ref={listRef}
      style={{
        width: width,
        height: height
      }}
    >
      {
        dataSource.map((item, index) => {
          return (
            <div style={itemStyle} key={index}>
              {renderItem(item, index)}
            </div>
          )
        })
      }
    </div>
  );
};

export default DynamicList;

• Буду признателен за любые советы по улучшению этой ситуации.

Answer 1

Используя функцию обратного вызова, как сказал @ TopW3, я смог решить проблему. Не полностью удовлетворен все же. Статья, которая также помогла мне решить проблему

const DynamicList = ({
  dataSource, renderItem, itemMaxWidth, itemHeight,
  margin, height = 500, width = 700 }) => {
  const windowWidth = useWindowDimensions().width; // 윈도우 크기 변화 감지용
  const [itemStyle, setItemStyle] = useState({
    width: itemMaxWidth,
    height: itemHeight,
    margin: margin
  });
  const [listWidth, setListWidth] = useState(null);

  const onListRefSet = useCallback((ref) => {
    if (ref)
      if (ref.current)
        setListWidth(ref.current.clientWidth);
  })

  useEffect(() => {
    if (listWidth) {
      const num = Math.floor(listWidth / itemMaxWidth);
      setItemStyle((pre) => ({
        ...pre,
        width: (listWidth / num) - (margin ? margin * 2 : 0),
      }))
    }
  }, [listWidth, itemMaxWidth, margin, itemHeight, windowWidth])

  return (
    <div
      className="dynamic-list"
      ref={onListRefSet}
      style={{
        width: width,
        height: height,
        minWidth: itemMaxWidth
      }}
    >
      {
        dataSource.map((item, index) => {
          return (
            <div style={itemStyle} key={index}>
              {renderItem(item, index)}
            </div>
          )
        })
      }
    </div>
  );
};

export default DynamicList;