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

0.14.0-alpha1 children with parent-based context changes don't update #4218

Closed
ryanflorence opened this issue Jun 25, 2015 · 3 comments
Closed

Comments

@ryanflorence
Copy link
Contributor

var Top = React.createClass({
  childContextTypes: {
    now: React.PropTypes.any
  },

  getChildContext() {
    return {
      now: this.state.now
    };
  },

  getInitialState() {
    return {
      now: Date.now()
    };
  },

  componentDidMount() {
    setInterval(() => {
      this.setState({
        now: Date.now()
      });
    }, 500);
  },

  render() {
    return (
      <div>
        <h1>{this.state.now}</h1>
        {React.cloneElement(this.props.children)}
      </div>
    );
  }
});

var Middle = React.createClass({
  render() {
    return React.Children.only(this.props.children);
  }
});

var Child = React.createClass({

  contextTypes: {
    now: React.PropTypes.any
  },

  shouldComponentUpdate() {
    return true;
  },

  render() {
    return <h2>{this.context.now}</h2>;
  }

});

// remove the bailout in the reconciler and this works
React.render(<Top><Child/></Top>, document.getElementById('example'));

// but this still doesn't
React.render(<Top><Middle><Child/></Middle></Top>, document.getElementById('example'));
@taion
Copy link

taion commented Aug 21, 2015

I'm seeing this same behavior in v0.14.0-beta3. With this example (running in react-heatpack):

import React from 'react';

class Holder extends React.Component {
  render() {
    return <Parent><Child /></Parent>;
  }
}

class Parent extends React.Component {
  static childContextTypes = {
    value: React.PropTypes.number.isRequired
  };

  constructor(props, context) {
    super(props, context);

    this.state = {value: 1};
  }

  getChildContext() {
    const {value} = this.state;
    return {value};
  }

  componentDidMount() {
    this.setState({value: 2});
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

class Child extends React.Component {
  static contextTypes = {
    value: React.PropTypes.number.isRequired
  };

  render() {
    return <div>{this.context.value}</div>;
  }
}

export default <Holder />;

I end up with <div>1</div> instead of <div>2</div> as expected. However, if I directly render <Parent><Child /></Parent> instead of <Holder />, then I see the expected result.

To get this to work correctly, I have to render React.cloneElement(this.props.children, {}) in Parent.

@sophiebits
Copy link
Collaborator

I think #4344 fixes that (happened after beta3) but it would be good to double-check.

@taion
Copy link

taion commented Aug 21, 2015

Oops - didn't realize that some of those PRs above were after beta3. This indeed works as expected against the current commit on master. Thank you!

taion added a commit to taion/react-router-relay that referenced this issue Aug 26, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants