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

[fabio-blanco]

In order to be able to use React lifecycle methods I'm trying to change the default Edit function created by @wordpress/create-block into a javascript class like in this simple test example:

import { registerBlockType } from '@wordpress/blocks';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * All files containing `style` keyword are bundled together. The code used
 * gets applied both to the front of your site and to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './style.scss';

/**
 * Internal dependencies
 */
//import Edit from './edit';
import save from './save';
import icons from "../../icons";
import {Component} from "@wordpress/element";
import {useBlockProps} from "@wordpress/block-editor";

export default class TestClass extends Component {
	render() {

		return (
			<div {...useBlockProps()}>
				This is only a test!!
			</div>
		);
	}

}

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType('multiple-blocks-plugin/notice', {
	icon: icons.note,

	/**
	 * @see ./edit.js
	 */
	edit: TestClass, //Edit,

	/**
	 * @see ./save.js
	 */
	save,
});

That's an approach I've seen in some tutorials like this one but, for some reason, I'm not been able to do it. The above code, gives me the following error at the browser console:

react_devtools_backend.js:2540 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Object.S (react-dom.min.js?ver=16.13.1:84)
    at d.useContext (react.min.js?ver=16.13.1:31)
    at xu (block-editor.min.js?ver=fc8c27c6e95e7e0d59b4e344cb9ddfed:12)
    at TestClass.render (index.js:30)
    at Ie (react-dom.min.js?ver=16.13.1:104)
    at rh (react-dom.min.js?ver=16.13.1:103)
    at zj (react-dom.min.js?ver=16.13.1:228)
    at Th (react-dom.min.js?ver=16.13.1:152)
    at tj (react-dom.min.js?ver=16.13.1:152)
    at Te (react-dom.min.js?ver=16.13.1:146)

So now I have the following questions:

• Am I doing something wrong?
• Is it not allowed anymore?
• Is there a better alternative to be able to use the React lifecycle?

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

[fabio-blanco]

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 and 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.

[Lovor01]

You can get the same results as some of the most commonly used lifecycle React methods, componentDidMount and componentWillUnmount with useEffect hook. You can study official react documentation. for this hook. Almost all, if not all React hooks are exported as block editor hooks.