Detected the violation of rules of hooks JS-0820
Bug risk
2 months ago
—
7 months old
React Hook "useBlockProps" is called conditionally. React Hooks must be called in the exact same order in every component render
41 */
42export default function Edit(props) {
43
44 const { attributes, setAttributes, blockProps = useBlockProps() } = props; 45
46 /**
47 * Selector de categorias, maneja la informacion que se guarda en el bloque.React Hook "useBlockProps" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"
170 ];
171
172 // personalizar clase
173 const blockProps = useBlockProps( {174 className: 'group-offcanvas',
175 } );
176React Hook "useBlockProps" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"
439 ];
440
441 // personalizar clase
442 const blockProps = useBlockProps( {443 className: 'editor-offcanvas-body',
444 } );
445React Hook "useBlockProps" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"
373 ];
374
375 // personalizar clase
376 const blockProps = useBlockProps( {377 className: 'editor-offcanvas-header',
378 } );
379React Hook "useBlockProps" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"
378 ];
379
380 // personalizar clase
381 const blockProps = useBlockProps( {382 className: 'editor-modal-header',
383 } );
384
Description
Rule 1: Only Call hooks at the Top Level.
Don't call hooks inside loops, conditions, or nested functions.
Instead, always use hooks at the top level of your React function.
By following this rule, you ensure that hooks are called in the same order each time a component renders.
This allows React to correctly preserve the state of hooks between multiple useState and useEffect calls.
Rule 2 : Only Call hooks from React Functions. Don't call hooks from regular JavaScript functions. Instead, you can: - Call hooks from React function components. - Call hooks from custom hooks
Bad Practice
// We're breaking the first rule by using a Hook in a condition
if (name !== '') {
useEffect(function persistForm() {
localStorage.setItem('formData', name);
});
}
Recommended
useEffect(function persistForm() {
// We're not breaking the first rule anymore
if (name !== '') {
localStorage.setItem('formData', name);
}
});