Trying to turn the Edit function into a class to be able to use React lifecycle methods

It turned out that, at least for my specific use case, there was no need to use a class or interact with React lifecycle methods. My code was already working with the component as a function but for some reason I wasn’t able to see it in that moment.
I have probably made a mistake while testing.

But I’ve made some research an discovered that the guys at React have an argument against using class in javascript. To address things that could just be done through classes in the past they have created the hooks functionality to be used by functional React components.
If you have the need to interact with the React state, take a look at the new state hook as everything seems to be functional now on at modern React applications. This would be my next step since even the guys from React are advising against using classes on new React components.
So now I will answer my own questions with what I’ve found in my research in order to help some one that really needs this:

Digging for a solution, I’ve found out that the problem is caused by the function useBlockProps. Is there a way to avoid it without loosing the useBlockProps provided functionalities?

At the present moment it seems to be no way to use classes and still have the useBlockProps functionality since it seems not to be implemented for classes by the folks from WordPress and React Hooks doesn’t work with classes.

Am I doing something wrong?

Yes, I had no need to use a class nor to direclty interact with React lifecycle methods since my functional code was already working.

Is it not allowed anymore?

useBlockProps is a hook so it was probably created targeting functional components only. So, it will not be able to be used with React classes components but React classes components can still be used. To use WordPress React classes now will be a little bit difficult though since the WordPress folks seems not to be supporting it.

Is there a better alternative to be able to use the React lifecycle?

Yes, it seems that it can be done now from a functional component with the useState hook that can be imported directly from the @wordpress/element package the source code seems to just be importing it directly from React with no modification.
Do it if you have the need to do it but do take care of the possible colateral effects.

Related Posts:

  1. Trigger Javascript on Gutenberg (Block Editor) Save
  2. Gutenberg – remove / add blocks with custom script
  3. How to use wp.hooks.addAction() in React JS/Gutenberg?
  4. How to only enqueue block javascript on the frontend when its needed [duplicate]
  5. Extend core block in Gutenberg
  6. Show control conditionally in Gutenberg
  7. Gutenberg custom block plugin with custom image sizes
  8. How to get the ToggleControl Gutenberg component working for a PHP Block
  9. Is there a core Sortable component in Gutenberg?
  10. Hooking a callback into the code within a Gutenberg block
  11. conditional layout based on if Innerblocks is not empty
  12. Gutenberg extend blocks add new class name
  13. initial open/toggle PluginDocumentSettingPanel panel in document setting block editor gutenberg
  14. Is there an equivalent of the PHP function sanitize_key in Gutenberg?
  15. Correctly handling WordPress core data retrieval in Gutenberg
  16. What do the args for Gutenberg subpackage “hooks” function “doAction” mean?
  17. How do I fire a snackbar notice in admin?
  18. Why is this gutenberg custom format button only available from the toolbar as a dropdown?
  19. Setting HTML properties in a Gutenberg plugin using WordPress settings
  20. Gutenberg RichText
  21. Provide specific example for block variation
  22. Use useSelect/useDispatch instead of withSelect/withDispatch
  23. How to handle Gutenberg wp.data async errors?
  24. Set current tab on a Gutenberg TabPanel component from outside that component
  25. Block editor: How to check if block editor has initialized and populated the data store?
  26. How to use wp.hooks.addAction() in React JS/Gutenberg?
  27. Load script after block is inserted
  28. Gutenberg block “This block appears to have been modified externally” on save
  29. How do I access site and block editor state data and use `useSelect()` or `withSelect()` to bind it to my components?
  30. Gutenberg passing block attributes to component in ES6/ESNext
  31. Can the index.asset.php file be used with the enqueue_block_editor_assets action?
  32. var is undefined in a Gutenberg block
  33. Gutenberg add extra attributes to custom format
  34. Using wp.data.select get actual tags (not id’s) used in post
  35. event/callback on block update?
  36. How to remove p / br elements from gutenbergs editor
  37. How to disable inline css styles generated by Gutenberg editor?
  38. Programatically update posts in database from one block to another using transform
  39. Gutenberg getMedia() in post query doesn’t return all featured images
  40. How to transform a legacy widget into a block
  41. Gutenberg select categories
  42. Add custom HTML markup to Gutenberg RichText
  43. Listening change event of taxonomy term checkboxes in Gutenberg editor
  44. Gutenberg get core data – search
  45. What is the correct way to import the blocks-editor?
  46. Open MediaUpload from external component in Gutenberg
  47. Gutenberg extend blocks add new class name
  48. How to add classes and events to image in javascript using Gutenberg?
  49. Checks when fetching data from multiple REST API endpoints in Gutenberg
  50. Search for a keyword across post types in a Gutenberg component
  51. Using apiFetch for retrieving post data in Gutenberg
  52. Add custom classes for blocks in editor based on custom attributes
  53. Looping over wordpress meta to create “ ‘s?
  54. How to load an additional script for a block in the block editor?
  55. useSelect second parameter
  56. How can I allow HTML in Gutenberg UI elements help text?
  57. Gutenberg consume wp-json data and reflect in frontend the content
  58. Trigger wp-embed via JavaScript to refresh iframe preview?
  59. Gutenberg getBlockIndex in save() function
  60. Widgets and Post/Page edit/new blank, console errors only, no server errors
  61. Get terms of a taxonomy using useSelect
  62. Gutenberg richtext block vaildation failed
  63. UnitControl – Block has encountered an error
  64. Conditional save return on Gutenberg Block
  65. Gutenberg select excerpt, use generated excerpt or use more block excerpt
  66. Can I alter the block editor’s paste text behavior?
  67. Custom Gutenberg-Block esnext pass variables
  68. Building a Featured Gallery component for Gutenberg
  69. Gutenberg dependencies in package.json
  70. find out reason of “Updating failed” in Post-editor
  71. How to read inline-CSS from Gutenberg block?
  72. Custom Gutenberg block: access dom element via JavaScript
  73. Custom Block – save.js function not saving attributes
  74. Gutenberg – useEffect manipulate DOM after block re-renders DOM
  75. Problem extending a core block
  76. Cannot read properties of undefined (reading ‘show_ui’) Error on WordPress Post Editor
  77. Including dependencies using @wordpress/dependency-extraction-webpack-plugin
  78. Issue migrating a checkbox-type meta field to the block editor
  79. Update block once an API request returns with a value
  80. Gutenberg – dynamically created element: how to set onChange?
  81. Custom block update rendering when reused
  82. WordPress Gutenberg Ajax request
  83. WP Gutenberg – custom block with two content fields
  84. How do I make a savable preview like Youtube Gutenberg block?
  85. Gutenberg Edit Block Inspector Controls and save
  86. Spans in gutenberg
  87. iFrame onLoad in custom Gutenberg block
  88. Block pattern conflict with custom block
  89. Table block variation with header section activated
  90. Filtering Gutenberg Components, not Blocks
  91. How to delete child block for associated parent block
  92. Passing object to FormTokenField suggestions
  93. How to detect if we are in the Site Editor part of the Block Editor (as opposed to editing a Page/Post) in JavaScript?
  94. How can I show a Slot/Fill in the block editor
  95. How to add a new attribute to core wp block editor without npm?
  96. How to add more elements to an already existing section in Gutenberg
  97. How do i get an Inline style in Gutenberg Block show up in front end?
  98. WordPress adds and tags into HTML blocks after saving
  99. Gutenberg core/file add style support in js/ json
  100. Working with a non-React external library in a custom block
tech