Q: CustomPIXIComponent, re-render when refresh props about react-pixi-fiber HOT 4 CLOSED

import React from 'react'
import PropTypes from 'prop-types'

import Graphics from './Graphics'

class Arrows extends React.Component {
  findNode = nodeId => this.props.nodes.find(node => node.id === nodeId)
  computedArrows = () =>
    this.props.arrows.map(arrow => ({
      from: this.findNode(arrow.from),
      to: this.findNode(arrow.to)
    }))
  render() {
    // re-render here is ok (1)
    const arrows = this.computedArrows().map(arrow => (
      <Graphics
        key={`${arrow.from.id}-${arrow.to.id}`}
        from={arrow.from}
        to={arrow.to}
      />
    ))
    return arrows
  }
}

Arrows.propTypes = {
  nodes: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired,
      w: PropTypes.number.isRequired,
      h: PropTypes.number.isRequired
    })
  ),
  arrows: PropTypes.arrayOf(
    PropTypes.shape({
      from: PropTypes.string.isRequired,
      to: PropTypes.string.isRequired
    })
  )
}

export default Arrows

import { CustomPIXIComponent } from 'react-pixi-fiber'
import * as PIXI from 'pixi.js'

const TYPE = 'Arrow'
export const behavior = {
  customDisplayObject: () => new PIXI.Graphics(),
  customApplyProps(instance, oldProps, newProps) {
    // Here I read "from" and "to" from newProps and create lines.
    // but this is not called
    this.applyDisplayObjectProps(oldProps, newProps)
  }
}

export default CustomPIXIComponent(behavior, TYPE)

this.setState({ arrows: [] })
this.setState({
  arrows: [...arrowsResp.arrows]
})