Как выполять render с задержкой?

Question

[Pogran]

У меня есть вот такой код

export class Node extends Component {
	renderChild = childId => {
		const { id } = this.props;

		return (
			<li key={childId}>
				<ConnectedNode id={childId} parentId={id} />
			</li>
		)
	};

	render() {
		const { parentId, childIds, type, _value, _key } = this.props;
		return (
			<div>
				{type == 'object' && _value && <span>&#123;</span>}
				{type == 'object' && !_value && <span><b>{_key} :</b> &#123;</span>}
				{type == 'array' && <span><b>{_key} :</b> [</span>}
				{type == 'object array' && <span>&#123;</span>}
				{type == 'string' && <span><b>{_key} :</b>{_value}</span>}

				{childIds.length && <ul style={{listStyle: 'none', paddingLeft: '24px'}}>
					{childIds.map(this.renderChild)}
				</ul>}

				{type == 'object' && <span> &#125;</span>}
				{type == 'object array' && <span> &#125;</span>}
				{type == 'array' && <span>]</span>}
			</div>
		)
	}
}

function mapStateToProps(state, ownProps) {
	return state.entity.structure[ownProps.id]
}

const ConnectedNode = connect(mapStateToProps, actions)(Node);
export default ConnectedNode;

Мне надо чтобы render с задержкой строился. Смысл в том что когда очень большая рекурсия то браузер в конечном итоге подвисает. поэтому думаю как-то ослабить нагрузку, сделав минимальную загрузку

Answer 1

[KnightForce]

setTimeout(()=>{
    //Код - контекст привязал через стрелочную функцию
}, 5000)