React - HOCs Inside Render - Existem exceções à regra?

Oct 14 2020

Implementei um padrão Pub / Sub usando várias técnicas de composição de componentes: React.cloneElement e "componentes compostos" funcionais. O objetivo em mente era ser capaz de registrar dinamicamente componentes em diferentes fluxos de dados, atribuindo a eles uma prop de "tópico".

Por exemplo, este componente recebe todos os dados publicados no tópico HELLO_WORLD:

 <MyComponent topic="HELLO_WORLD" />

Aqui está o interior de MyComponent expresso como um componente funcional:

export const MyComponent = props => subscribe(({ topic, data }) => {
    return <span>I am listening to the {topic} topic. Current state: {data}</span>
}, props.topic);

Como alternativa, aqui é expresso como um componente de classe:

class MyComponent extends React.Component {
    render() {
        const { props: { otherProps, topic } } = this;
        return subscribe(({ data }) => {
            return <span>I am listening to the {topic} topic. Current state: {data}</span>
        }, topic)
    }
}

Como você pode ver, este padrão necessitou retornar um componente de ordem superior dentro da função de renderização. Você acha que isso se enquadra na advertência mencionada aqui ?

Aqui está mais algum contexto:

A função de inscrição retorna um componente composto:

const subscribe = (Comp, topic) => {
  return (
    <Subscriber topic={topic}>
      <Comp />
    </Subscriber>
  );
};

Que envolve MeuComponente em um Assinante:

class Subscriber extends Component {
    state = publisher.getState(this.props.topic) // get initial state

    onMessage = msg => {
        this.setState({ ...msg });
        return this.state;
    }

    componentDidMount() {
        this.subscription = publisher
            .subscribe(this.props.topic, this.onMessage);
    }
    
    componentWillUnmount() {
        publisher.unsubscribe(this.props.topic, this.onMessage);
    }

    render() {
        const {
            state: { data },
            props: { children }
        } = this;
        return Children.map(children, child =>
            cloneElement(child, { ...this.props, data })
        );
    }
}

O assinante obtém seu estado do editor, que armazena os tópicos em cache:

const eventEmitter = new EventEmitter();

const publisher = {
  subscribe: function (eventName, cache) {
    eventEmitter.on(eventName, data => {
      this.cache[eventName] = cache(data);
    });
  },
  unsubscribe: function (eventName, fn) {
    eventEmitter.off(eventName, fn)
  },
  send: function (eventName, payload) {
    eventEmitter.emit(eventName, payload);
    if (!this.cache[eventName]) {
      this.cache[eventName] = { data: payload };
    }
  },
  getState: function (topic) {
    return this.cache[topic] || {};
  },
  cache: {}
}

O criador de perfil do componente sugere que essa configuração está sendo renderizada de forma muito eficiente. Além disso, o estado é persistido em um cache fora do terreno do React. Se você me perguntar, é basicamente Flux com uma torção. Seus pensamentos?

React - HOCs Inside Render - Existem exceções à regra?

Respostas