Trying to use React Hooks in ReactDOM.render. Is it right?

Question

So i get dispatcher.useEffect is not a function

react.development.js:1463 Uncaught TypeError: dispatcher.useEffect is not a function
at useEffect (react.development.js:1463)
at Preload (VM75697 Preload.js:40)
at ProxyFacade (react-hot-loader.development.js:677)
at mountIndeterminateComponent (react-dom.development.js:14563)
at beginWork (react-dom.development.js:15063)
at performUnitOfWork (react-dom.development.js:17820)
at workLoop (react-dom.development.js:17860)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)

I'm trying to use functions inside render method:

render(
  <Root store={store} history={history} />,
  document.getElementById('app'),
)

My Root.js file looks like:

import React from 'react'
import { hot } from 'react-hot-loader'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'
import Preload from '../Preload'
import Routes from './Routes'    

const Root = ({ store, history }) => (
  <Provider store={store}>
    <Preload>
      <ConnectedRouter history={history}>
        <Routes />
      </ConnectedRouter>
    </Preload>
  </Provider>
)

export default hot(module)(Root)

And finally i use useEffect in Preload.js

import { useEffect } from 'react'
import { connect } from 'react-redux'
import { init } from '../actions'

const Preload = ({
  children,
  token,
  onInit,
}) => {
  useEffect(() => {
    if (token) {
      onInit()
    }
  })

  return children
}

export default connect(
  state => ({
    token: state.security.token,
  }),
  dispatch => ({
    onInit: () => dispatch(init()),
  }),
)(Preload)

Most answers to that error was, that people forget to use function inside useEffect, but not in my case.

Andrey Osiyuk Andrey Osiyuk · Accepted Answer · 2018-11-24T14:50:02

Well, answer is very simple. Update to beta not only react, but react-dom too.

And it seems react-redux's connect get me

Uncaught Error: Hooks can only be called inside the body of a function component.

because react-redux starts support hooks only in 6 version (in beta right now).

Trying to use React Hooks in ReactDOM.render. Is it right?

1 Answers