为什么我收到此错误“React 检测到 SidebarDesktop 调用的 Hooks 的顺序发生了变化”？

Question

I declare a const in my SideBarDesktop component name isSidebarSticky which use a custom hook( useStickyElement ) that has 2 arguments:

const isSidebarSticky = styleStore.contentHeight
    ? useStickyElement(sideBarDomRef, styleStore.headerHeight + styleStore.contentHeight)
    : 0;

The problem is that I'm getting this error: "React has detected a change in the order of Hooks called by SidebarDesktop. This will lead to bugs and errors if not fixed." and I don't know why.

PS If I'm not making that verification and I just write:

const isSidebarSticky = useStickyElement(sideBarDomRef, styleStore.headerHeight + styleStore.contentHeight);

I'm not getting the error anymore.

The thing is that if I use the second example styleStore.contentHeight is not updated on time(it's 0) and I have to make that verification, otherwise the result will be useStickyElement(sideBarDomRef, styleStore.headerHeight + 0) . Even though styleStore.contentHeight will be greater then 0 eventually the useStickyElement will not be called anymore.

Answer 1

React hooks can not be conditional. See https://reactjs.org/docs/hooks-rules.html

Answer 2

You can not enter terms in the call to hooks

If there are cases where the hooks are not called React he will not be able to compare the runs and he fails

Conditions can be inserted inside the hooks

see here explanation in docs