I am trying to use Context
and Reducers
via React's hooks, and running into problems with the order of the hooks not being constant. My understanding was that as long as the order of the useHook(…)
remained the same, it was fine to invoke the returned state/update function/reducer in any sort of control flow. Otherwise, I'm invoking the hooks at the very beginning of the FunctionComponents.
Is it that I'm generating Days
in a loop? Or missing something else?
Warning: React has detected a change in the order of Hooks
called by Container. This will lead to bugs and errors if not fixed. For
more information, read the Rules of Hooks:
https://reactjs.org/docs/hooks-rules.html
Previous render Next render
------------------------------------------------------
1. useContext useContext
2. undefined useRef
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The full version of Container
is below. An excerpt from Day
is below, and has a ref from react-dnd
's useDrop
.
export const Container: FunctionComponent<Props> = () => {
let events = useContext(State.StateContext)
//let events: Array<Event.Event> = [] <- with this, no warning
const getDaysEvents = (day: Event.Time, events: Array<Event.Event>) => {
return events.map(e => {
const isTodays = e.startTime.hasSame(day, "day")
return isTodays && Event.Event({ dayHeight, event: e })
})
}
let days = []
for (let i = 0; i < 7; i++) {
const day = DateTime.today().plus({ days: i })
days.push(
<Day key={day.toISO()} height={dayHeight} date={day}>
{getDaysEvents(day, events)}
</Day>
)
}
return <div className="Container">{days}</div>
}
An excerpt from Day
(Event
similarly uses a useDrag
hook, also called at the top level just like here).
const Day: FunctionComponent<DayProps> = ({ date, height, children }) => {
const dispatch = useContext(State.DispatchContext)
const [{ isOver, offset }, dropRef] = useDrop({
// …uses the dispatch function within…
// …
})
// …
}
Day
component, not within Container.Container
, not by 'Day'. This seems strange. By any chance, isEvent.Event()
using hooks?useDrag
, at the top-level. The ref from it is used, as well as a value returned by a monitor within a closure. Happy to include it, it's the same sort of thing as withDay
andContainer
, though.Event.Event()
rather than returning jsxreturn isTodays && <Event.Event dayHeight={dayHeight} event={e} />