question | using stateless component

[eesur]

hi Thibaut , thanks for these great examples using react-faux-dom!

I'm new to React but comfortable with D3, and just want to clarify if I would lose any functionality or issues with updates if I used a stateless component to replace the MyReactComponent class:

const MyReactComponent = (props) => {
  const faux = props.connectFauxDOM('div', 'chart')

  function hello (selection) {
    d3.select(selection)
      .append('div')
      .html(props.data)
  }

  hello(faux)

  return (
    <div>
      <h2>Here is some fancy data:</h2>
      <div className='renderedD3'>
        {props.chart}
      </div>
    </div>
  )
}

Is this an okay pattern to use for all d3 charts also, or should I be utilising the componentDidMount lifecycle as in all your examples?

[tibotiber]

Hi @eesur, I haven't been working on this for a while so please excuse my slight fuzziness. The withFauxDOM HOC is really built for updates and animations, which means it re-renders the component every 16ms when there are updates. Generally you would want to keep control of how that affects your actual rendering by splitting things between componentDidMount and componentDidUpdate. In your example you are missing the this.props.animateFauxDOM(800) which is needed even for a single render iirc, thus you're going to create your selector and append your div a lot of times, which is unnecessary. On such a toy example it sounds ridiculous but once you've got real charts with updates / animations it starts making sense, you can refer to https://github.com/tibotiber/rfd-animate-example and https://github.com/tibotiber/rfd-update-example for more typical charts code. So, bottom line, i'm not even sure if it works as a functional stateless component but it does not makes sense in term of performance.

Note: this answer is only regarding using react-faux-dom with the withFauxDOM HOC. Without the HOC i'm not sure how that would translate as I have only worked through the HOC.

Hope this helps.

[eesur]

thanks @tibotiber that makes sense now and very useful. I did get it working by using ReactFauxDOM.createElement('div') then passing that to .toReact() ; but I will use the class so I can control the rendering and use the lifecycles as suggested with the withFauxDOM HOC. Thank you kindly for heads up :)

[tibotiber]

Cool, glad it helped.