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

dongtong · 2019-04-29T05:27:27Z

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

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:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
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)

The text was updated successfully, but these errors were encountered:

mischa-s · 2019-06-29T10:03:44Z

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

BookOfGreg · 2019-06-29T12:08:45Z

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 · 2020-08-13T15:34:04Z

+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 facebook/react#13991

MoNouri97 · 2021-07-12T19:07:43Z

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.

BookOfGreg added good first issue help wanted labels May 2, 2019

reactjs / react-rails Public

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

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

dongtong commented Apr 29, 2019

mischa-s commented Jun 29, 2019

BookOfGreg commented Jun 29, 2019

aandis commented Aug 13, 2020 •

edited

MoNouri97 commented Jul 12, 2021 •

edited

reactjs / react-rails Public

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

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

Comments

dongtong commented Apr 29, 2019

Steps to reproduce

Expected behavior

Actual behavior

System configuration

mischa-s commented Jun 29, 2019

BookOfGreg commented Jun 29, 2019

aandis commented Aug 13, 2020 • edited

MoNouri97 commented Jul 12, 2021 • edited

aandis commented Aug 13, 2020 •

edited

MoNouri97 commented Jul 12, 2021 •

edited