Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warning: React has detected a change in the order of Hooks called by Edit. #4

Open
bobbingwide opened this issue Jul 1, 2021 · 0 comments
Assignees
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@bobbingwide
Copy link
Owner

bobbingwide commented Jul 1, 2021

While trying to cater for the case where the post type is already known I wrote the following code in the Edit function.

export default function Edit( { setAttributes, attributes } ) {
	const blockProps = useBlockProps();
	var postType = undefined;
	if ( attributes.postType ) {
		postType = attributes.postType;
	} else {
		postType = useSelect(
			(select) => select('core/editor').getCurrentPostType(),
			[]
		);
	}

This appeared to produce the following warning, which eventually caused the block to fail.

react-dom.860550b4.js:61 Warning: React has detected a change in the order of Hooks called by Edit. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

  1. useContext useContext
  2. useCallback useCallback
  3. useContext useContext
  4. useContext useContext
  5. useState useState
  6. useRef useRef
  7. useEffect useEffect
  8. useReducer useReducer
  9. useRef useRef
  10. useRef useRef
  11. useRef useRef
  12. useRef useRef
  13. useRef useRef
  14. useRef useRef
  15. useCallback useCallback
  16. useMemo useMemo
  17. useLayoutEffect useLayoutEffect
  18. useLayoutEffect useLayoutEffect
  19. useRef useRef
  20. useCallback useCallback
  21. useContext useContext
  22. useContext useContext
  23. useState useState
  24. useRef useRef
  25. useEffect useEffect
  26. useReducer useReducer
  27. useRef useRef
  28. useRef useRef
  29. useRef useRef
  30. useRef useRef
  31. useRef useRef
  32. useRef useRef
  33. useCallback useCallback
  34. useMemo useMemo
  35. useLayoutEffect useLayoutEffect
  36. useLayoutEffect useLayoutEffect
  37. useEffect useEffect
  38. useRef useRef
  39. useCallback useCallback
  40. useContext useContext
  41. useContext useContext
  42. useState useState
  43. useRef useRef
  44. useEffect useEffect
  45. useReducer useReducer
  46. useRef useRef
  47. useRef useRef
  48. useRef useRef
  49. useRef useRef
  50. useRef useRef
  51. useRef useRef
  52. useCallback useCallback
  53. useMemo useMemo
  54. useLayoutEffect useLayoutEffect
  55. useLayoutEffect useLayoutEffect
  56. useEffect useEffect
  57. useContext useContext
  58. useRef useRef
  59. useLayoutEffect useLayoutEffect
  60. useRef useRef
  61. useCallback useCallback
  62. useCallback useCallback
  63. useContext useContext
  64. useContext useContext
  65. useState useState
  66. useRef useRef
  67. useEffect useEffect
  68. useReducer useReducer
  69. useRef useRef
  70. useRef useRef
  71. useRef useRef
  72. useRef useRef
  73. useRef useRef
  74. useRef useRef
  75. useCallback useCallback
  76. useMemo useMemo
  77. useLayoutEffect useLayoutEffect
  78. useLayoutEffect useLayoutEffect
  79. useContext useContext
  80. useRef useRef
  81. useCallback useCallback
  82. useContext useContext
  83. useCallback useCallback
  84. useContext useContext
  85. useContext useContext
  86. useState useState
  87. useRef useRef
  88. useEffect useEffect
  89. useReducer useReducer
  90. useRef useRef
  91. useRef useRef
  92. useRef useRef
  93. useRef useRef
  94. useRef useRef
  95. useRef useRef
  96. useCallback useCallback
  97. useMemo useMemo
  98. useLayoutEffect useLayoutEffect
  99. useLayoutEffect useLayoutEffect
  100. useRef useRef
  101. useCallback useCallback
  102. useCallback useCallback
  103. useContext useContext
  104. useContext useContext
  105. useState useState
  106. useRef useRef
  107. useEffect useEffect
  108. useReducer useReducer
  109. useRef useRef
  110. useRef useRef
  111. useRef useRef
  112. useRef useRef
  113. useRef useRef
  114. useRef useRef
  115. useCallback useCallback
  116. useMemo useMemo
  117. useLayoutEffect useLayoutEffect
  118. useLayoutEffect useLayoutEffect
  119. useCallback useCallback
  120. useContext useContext
  121. useContext useContext
  122. useState useState
  123. useRef useRef
  124. useEffect useEffect
  125. useReducer useReducer
  126. useRef useRef
  127. useRef useRef
  128. useRef useRef
  129. useRef useRef
  130. useRef useRef
  131. useRef useRef
  132. useCallback useCallback
  133. useMemo useMemo
  134. useLayoutEffect useLayoutEffect
  135. useLayoutEffect useLayoutEffect
  136. useContext useContext
  137. useRef useRef
  138. useCallback useCallback
  139. useCallback useCallback
  140. useContext useContext
  141. useContext useContext
  142. useState useState
  143. useRef useRef
  144. useEffect useEffect
  145. useReducer useReducer
  146. useRef useRef
  147. useRef useRef
  148. useRef useRef
  149. useRef useRef
  150. useRef useRef
  151. useRef useRef
  152. useCallback useCallback
  153. useMemo useMemo
  154. useLayoutEffect useLayoutEffect
  155. useLayoutEffect useLayoutEffect
  156. useContext useContext
  157. useRef useRef
  158. useCallback useCallback
  159. useCallback useCallback
  160. useContext useContext
  161. useContext useContext
  162. useState useState
  163. useRef useRef
  164. useEffect useEffect
  165. useReducer useReducer
  166. useRef useRef
  167. useRef useRef
  168. useRef useRef
  169. useRef useRef
  170. useRef useRef
  171. useRef useRef
  172. useCallback useCallback
  173. useMemo useMemo
  174. useLayoutEffect useLayoutEffect
  175. useLayoutEffect useLayoutEffect
  176. useRef useRef
  177. useCallback useCallback
  178. useContext useContext
  179. useRef useRef
  180. useCallback useCallback
  181. useRef useRef
  182. useState useState
  183. useEffect useEffect
  184. useReducer useReducer
  185. useReducer useReducer
  186. useState useState
  187. useMemo useMemo
  188. useMemo useMemo
  189. useLayoutEffect useLayoutEffect
  190. useLayoutEffect useLayoutEffect
  191. useRef useRef
  192. useRef useRef
  193. useMemo useMemo
  194. useImperativeHandle useImperativeHandle
  195. useMemo useMemo
  196. useEffect useEffect
  197. useEffect useEffect
  198. useRef useRef
  199. useRef useRef
  200. useRef useRef
  201. useRef useRef
  202. useLayoutEffect useLayoutEffect
  203. useLayoutEffect useLayoutEffect
  204. useCallback useCallback
  205. useCallback useCallback
  206. useContext useContext
  207. useContext useContext
  208. useState useState
  209. useRef useRef
  210. useEffect useEffect
  211. useReducer useReducer
  212. useRef useRef
  213. useRef useRef
  214. useRef useRef
  215. useRef useRef
  216. useRef useRef
  217. useRef useRef
  218. useCallback useCallback
  219. useMemo useMemo
  220. useLayoutEffect useLayoutEffect
  221. useLayoutEffect useLayoutEffect
  222. useCallback useCallback
  223. useContext useContext
  224. useContext useContext
  225. useState useState
  226. useRef useRef
  227. useEffect useEffect
  228. useReducer useReducer
  229. useRef useRef
  230. useRef useRef
  231. useRef useRef
  232. useRef useRef
  233. useRef useRef
  234. useRef useRef
  235. useCallback useCallback
  236. useMemo useMemo
  237. useLayoutEffect useLayoutEffect
  238. useLayoutEffect useLayoutEffect
  239. useCallback useCallback
  240. useContext useContext
  241. useContext useContext
  242. useState useState
  243. useRef useRef
  244. useEffect useEffect
  245. useReducer useReducer
  246. useRef useRef
  247. useRef useRef
  248. useRef useRef
  249. useRef useRef
  250. useRef useRef
  251. useRef useRef
  252. useCallback useCallback
  253. useMemo useMemo
  254. useLayoutEffect useLayoutEffect
  255. useLayoutEffect useLayoutEffect
  256. useCallback useCallback
  257. useContext useContext
  258. useContext useContext
  259. useState useState
  260. useRef useRef
  261. useEffect useEffect
  262. useReducer useReducer
  263. useRef useRef
  264. useRef useRef
  265. useRef useRef
  266. useRef useRef
  267. useRef useRef
  268. useRef useRef
  269. useCallback useCallback
  270. useMemo useMemo
  271. useLayoutEffect useLayoutEffect
  272. useLayoutEffect useLayoutEffect
  273. useCallback useContext

Changing the code back to always calling useSelect() appeared to resolve the problem.
I can't say that the React documentation helped much; I have hardly any understanding of hooks.
All I know is that they're used somehow.

var postType = undefined;
	postType = useSelect(
		(select) => select('core/editor').getCurrentPostType(),
		[]
	);
	if ( attributes.postType ) {
		postType = attributes.postType;
	} else {
	  // We've already found a value using select.
	}
	var [meta, setMeta] = useEntityProp(
		'postType',
		postType,
		'meta'
	);
@bobbingwide bobbingwide added bug Something isn't working help wanted Extra attention is needed labels Jul 1, 2021
@bobbingwide bobbingwide self-assigned this Jul 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

1 participant