Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dongtong opened this issue Apr 29, 2019 · 5 comments
Closed

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

dongtong opened this issue Apr 29, 2019 · 5 comments

Comments

@dongtong
Copy link

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
Copy link

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

@BookOfGreg
Copy link
Member

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
Copy link

aandis commented Aug 13, 2020

+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
Copy link

MoNouri97 commented Jul 12, 2021

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
Copy link
Collaborator

alkesh26 commented Nov 4, 2022

Closing this issue as it was fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants