react-hardware icon indicating copy to clipboard operation
react-hardware copied to clipboard

DevTool hides children

Open edvinerikson opened this issue 8 years ago • 1 comments

DevTool does not display children of components that doesn't call setState. Everything works as expected with the firmata mock. To reproduce this you will need to have the actual hardware.

Tested in React Native DevTools inside Nuclide. RH version: master Hardware: Arduino UNO Firmata: 0.11.3

Expected behavior

<Led>
  <pin pin={9} value={1} />
</Led>

Actual behavior

<Led />

Example that hides children

import React, {Component} from 'react';
import {getPort} from '../port';
import ReactHardware from '../../src';

class Led extends Component {
  render() {
    return (
      <pin
        pin={9}
        value={1}
        mode={'OUTPUT'}
      />
    );
  }
}
ReactHardware.render(
  <Led />,
  getPort(),
  (inst) => {
    console.log('Rendered <%s />', Led.name);
  }
);

Example that shows children

import React, {Component} from 'react';
import {getPort} from '../port';
import ReactHardware from '../../src';

class Led extends Component {
  constructor() {
    super();
    this.state = {value: 1};
  }
  componentDidMount() {
    this.setState({value: 0});
  }
  render() {
    return (
      <pin
        pin={9}
        value={this.state.value}
        mode={'OUTPUT'}
      />
    );
  }
}
ReactHardware.render(
  <Led />,
  getPort(),
  (inst) => {
    console.log('Rendered <%s />', Led.name);
  }
);

edvinerikson avatar Apr 22 '16 16:04 edvinerikson

Nice discovery! This is likely going to be deferred until facebook/react#6549 lands which will likely supersede the entire DevTools integration that is currently implemented.

iamdustan avatar Apr 24 '16 14:04 iamdustan