Using React Hooks

[ghost]

I'm trying to use React Hooks (introduced in React 16.8) to build custom blocks. I'm already using React, when I need state management and lifecycle hooks, I use "Component", from the wp.element global object (which is an abstraction of React)

Since this commit : c7d14ca, React Hooks are exposed by wp.element (I'm using the @wordpress/element package to get the last version). But I can't use them.

Here is a simple component :

import { createElement, useState } from '@wordpress/element'

const MyComponent = (props) => {
    const [count, setCount] = useState(0)
    return(
       <p>Some content</p>
    )
}

export default MyComponent

Here, i'm able to import useState from @wordpress/element package, I don't have any webpack or console error on the import, but I can't use it. The useState(0) call is throwing this error :

react-dom.min.js?ver=16.8.4:117 Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Here is my webpack.config.js :

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './admin/blocks/src/index.js',
  output: {
    library: 'UserList',
    libraryTarget: 'umd',
    libraryExport: 'default',
    path: path.resolve(__dirname, 'admin/blocks/dist/'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
}

and my .babelrc :

{
    "plugins": [
        [ "transform-react-jsx", {
            "pragma": "createElement"
        } ]
    ]
}

has anyone ever used React Hooks to build custom blocks ?

Some additional informations :

• This may be a track : Upgrade React to 16.8.4: Welcome React Hooks #14400 (comment)
• I tried to install the last beta version of WordPress (5.2-alpha-45015), to get the last React version everywhere, as announced in this issue : How can I get the latest version of react? #14438 but I still have the same problem.

[youknowriad]

🤔 Really weird, I can say that I've used hooks in several PRs in the Gutenberg repository without any issue. Can you setup a https://codesandbox.io with a small example?

[ghost]

@youknowriad I think it should work in a separate gutenberg environment, although I do not really know how to prove it.

But the problem I encounter is in the WordPress back office, when rendering the edit function of a custom block.

Could it be a conflict of react and react-dom versions between the @wordpress/element module and WordPress core ?

[youknowriad]

Could it be a conflict of react and react-dom versions between the @wordpress/element module and WordPress core ?

Yes, probably. Are you trying to bundle @wordpress/element in your wordpress plugin? You shouldn't do that if it's the case as you can only use a single React version at a time. you just rely on the wp.element global and the wp-element WordPress script dependency. (hooks will be there in 5.2 though)

[ghost]

Yes that's right, I was actually trying to get the latest React version using the @wordpress/element package, but as you say, I ended up with two different React.
I just wanted to know if anyone had ever been able to use React 16.8 and hooks in custom block development, but it's normal not to be able to do it yet

(hooks will be there in 5.2 though)

Yes, it looks like I'll have to be patient and wait for WordPress 5.2.

thanks a lot for your answer 😃

[youknowriad]

Thanks, closing this issue right now.

[andreiglingeanu]

Eventually got the possibility of using hooks by using a copy of React and React DOM, exposed globally. Of course this is super inefficient and hacky -- will make sure to remove this from the plugin I work on once 5.2 gets released.