You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.
Custom equality checks must include all props you care about. Including callbacks. (This is why generally you shouldn't supply your own comparison function — it's easy to make a mistake!)
The mistake you're making is that you're ignoring changes to props.onSelect. So the onSelect handler of both buttons "sees" the initial selectedStartDate state only (null). It's never updated. Therefore, if (!selectedStartDate) is always true and you always end up calling setSelectedStartDate.
You can also useCallback if you don't want to break memoization by always passing different functions. But in that case you need to make sure you don't close over anything that's not specified in deps. So you can't close over selectedStartDate in your check.
The most idiomatic fix to this is useReducer. It makes it easy to preserve callback identity while having more complicated state logic. Here's an example: https://codesandbox.io/s/62961yk72z.