Why react-rails can not work with react context API?

[dongtong]

react-rails can not re-render provider new state in children, also can not work with useContext in react

Contributing Guide

Steps to reproduce

<%= react_component("Test")%>

Test.js

import React from 'react';
import { UserProvider, UserConsumer } from './context';
import Panel from './demo';

const Test = () => {
  return (
    <UserProvider>
      <Panel />
    </UserProvider>
  )
}
export default Test

context.js

import React from 'react';
let UserContext;
const { Provider, Consumer } = UserContext = React.createContext();
// Context.Consumer, Context.Provider

class UserProvider extends React.Component {
  state = {
    currentUser: "foo"
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        currentUser: "bar"
      })
    }, 6000)
  }

  render() {
    return (
      <Provider
        value={{
          user: this.state.currentUser,
        }}
      >
        {this.props.children}
      </Provider>
    );
  }
}

export { UserProvider, Consumer as UserConsumer, UserContext };

demo.js

import React, { useContext } from 'react';
import { UserContext } from './context';

const Panel = () => {
  const { user } = useContext(UserContext);
  return (
    <p>{user}</p>
  )
}

export default Panel

Expected behavior

Work with useContext and children can re-render when provider state is updated

Actual behavior

react.development.js:88 Uncaught 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

System configuration

Sprockets or Webpacker version: 3.5 React-Rails version: 2.4.4 Rect_UJS version: 2.4.4 Rails version: 5.2 Ruby version: 2.3.6

---

(Describe your issue here)

[mischa-s]

I would be keen to help work adding support for hooks but don't really know where to start - anybody got any ideas?

[BookOfGreg]

Hooks and context api happen within the JS context. This issue is likely not related to react-rails. Basically if it works in Webpack it will work in this gem broadly speaking.

Looking at the original question the OP could be using an old version of React if they're using Sprockets (They didn't specify) that doesn't have hooks. https://github.com/reactjs/react-rails/blob/master/VERSIONS.md

@mischa-s the best way to contribute to this specific issue would be to replicate this issue in a new project and link it to this issue so we can start to diagnose it more fully. Thank you for the assistance, it can take me a long time to get around to solving issues on topics I don't personally use otherwise.

[aandis]

+1. Running into this issue with Sprockets while trying to use Hooks. I'm on React 16.9.0 (v2.6.1). Could be related to https://github.com/facebook/react/issues/13991

[MoNouri97]

Is this issue specific to Context or are all hooks not supported, because I ran into the same issue while using other hooks. I want to know if its a problem with my implementation or does hooks generally not work with react-rails.

EDIT: my issue was solved after adding Webpacker.

[alkesh26]

Closing this issue as it was fixed.