Можно еще немного помочь попросить? render() {

Question

Можно еще немного помочь попросить? render() {

const { map } = this.props;
console.log("RENDER1");
return (
<Query query={QUERY}>
{q => {
if (q.loading) return <Icon type="loading" style={{ fontSize: 24 }} spin />;
if (q.error) return <p>Ошибка...</p>;
if (
!q.data.ui.visiblePanels.includes("attrTable") ||
q.data.ui.visiblePanels.includes("search") ||
q.data.ui.controlsSelected.includes("routes") ||
q.data.ui.controlsSelected.includes("panoramas") ||
!this.state.features ||
this.state.features === null
) {
console.warn("Must return null");
console.log("RENDER2");
return null;
} else {
const visiblePanels = q.data.ui.visiblePanels;
console.log("RENDER3");
console.error(!this.state.features, this.state.features === null);
// return null;
return (
<Mutation mutation={UiMutation}>
{(uiMutation, { data }) => (
<ErrorBoundary>
<Container>
<AttributiveTable
hasHeader
map={map}
header={this.state.tableHeader}
point={this.state.point}
pixel={this.state.pixel}
features={this.state.features}
onClose={() => {
uiMutation({
variables: {
ui: {
visiblePanels: this.closeTable(visiblePanels)
}
}
});
}}
/>
</Container>
</ErrorBoundary>
)}
</Mutation>
);
}
}}
</Query>
);
}
}
При соблюдении моей дурацкой кучи условий, в консоль пишется рендер1-рендер2-рендер3. ЧЯДНТ? Помимо говнокода, конечно...