is it necessary to put this in useMemo ? (date calculations)-CodePudding

I use a timer and I want to ask you should I wrap this with useMemo and callback ?

without:


const [time, setTime] = useState();

const calculateInitialDuration = (endDate: string, today: Date): CountdownResult => {
  const futureDate = new Date(endDate)
  const days = differenceInDays(futureDate, today)
  const hours = differenceInHours(futureDate, today) % 24
  const minutes = differenceInMinutes(futureDate, today) % 60
  const seconds = differenceInSeconds(futureDate, today) % 60
  return { days, hours, minutes, seconds }
}

  useEffect(() => {

    const timer = setInterval(() => 
      setTime(calculateInitialDuration(expire_date, new Date())), 1000);
    return () => clearInterval(timer);
  })

With memos

  const calculateInitialDuration = useCallback(() => {
    const days = calcDay;
    const hours = calcHours;
    const minutes = calcMinute;
    const seconds = calcSeconds;
    return { days, hours, minutes, seconds };
  }, [time]);


  const calcDay = useMemo(() => (differenceInDays(new Date(expire_date), new Date())), [time]);
  const calcHours = useMemo(() => (differenceInHours(new Date(expire_date), new Date()) % 24), [time]);
  const calcMinute = useMemo(() => (differenceInMinutes(new Date(expire_date), new Date()) % 60), [time]);
  const calcSeconds = useMemo(() => (differenceInSeconds(new Date(expire_date), new Date()) % 60), [time]);

so is that necessary to wrap all calculations with memo or should I use the simple without useMemo ?

the second problem it does not lose 1 second, sometimes it looses 2 seconds

CodePudding user response：

If you're trying to calculate a date difference, wouldn't you want it to be from the specific instance that the method was called?

I.E. Instead of using new Date() for every call, wouldn't it make more sense to have Date now = new Date(); and then pass in now for each call?

At the very least, that would remove the loss in seconds, would it not?

EDIT: Realizing this question is in relation to react, which I am unfortunately unfamiliar with. If this answer is somehow correct, then awesome. Otherwise, sorry for wasting your time.

CodePudding user response：

It's not a good idea to try to achieve an exact time different in the browser. setInterval/setTimeout can only guarantee you a minimal time when your function will be called. As for memoization: the usual recommendation to use it - use it for heavy calculation OR if you pass some variable to another component as a prop. For example:

const memoized = useMemo(() => {....}, [])
return <SomeComponent prop={memoized}/>

Unless you are in one of the above situations and have visible problems with performance, using unnecessary memoization may end up being worse for performance.