useContext или вызов useEffect несколько раз?

Question

У меня есть пользовательский хук useEffect для получения текущего времени каждую минуту.

const useDateStatus = () => {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setDate(() => new Date());
    }, 60000); 
    return () => clearInterval(interval);
  }, []);

  return date;
};

Мне нужен общий компонент, который, когда дата попадает в данный диапазон времени, возвращает ноль, иначе он будетотобразить date.

const DateAlert = ({timeRanges, children}) => {
  const date = useDateStatus();

  if (!inRanges(date, timeRanges)) {
    return null;
  }

  return (
    <Alert>
      <p>{date}</p>
      {children}
    </Alert>
  );
};

Мне также нужен еще один общий компонент, которому не нужен объект даты.

const Display = ({timeRanges, children}) => {
  const date = useDateStatus();

  if (!inRanges(date, timeRanges)) {
    return null;
  }

  return children;
};

Должен ли я создать контекст, содержащий date, чтобы передать реквизиты date, а затем заставить DateAlert использовать контекст?

const context = React.createContext(new Date());
const DateContext = ({children}) => {
  const date = useDateStatus(new Date);
  return (
    <context.Provider value={date}>
      {children}
    </context.Provider>
  );
}

Мне нужно получить состояние date, из Как передавать реквизиты в {this.props.children} , я думаю, что хорошо использовать контекст для передачи date в качестве реквизитов детям.

В чем разница между контекстом для получения date или прямым вызовом useDateStatus() для получения даты?

Или есть лучший способ уменьшить избыточность между DateAlert и Display?

Answer 1

Я бы порекомендовал сделать один компонент, а затем использовать этот компонент для обоих, например:

const RenderIfInRange = ({timeRanges, children}) => {
  const date = useDateStatus();

  if (!inRanges(date, timeRanges)) {
    return null;
  }

  return children;
};

Это становится вашим Display компонентом. Тогда:

const DateAlert = ({children}) => (
    <RenderIfInRange>
      <Alert>
        <p>{date}</p>
        {children}
      </Alert>
    </RenderIfInRange>
  );

Я бы порекомендовал посмотреть Бах Труфита . Это позволяет вам использовать HOC-шаблон для хуков и делает мой код более аккуратным, на мой взгляд.