Должен ли useEffect быть предпочтительным хуком для обработки больших данных? - PullRequest
Новая
       12

Должен ли useEffect быть предпочтительным хуком для обработки больших данных?

0 голосов
/ 30 апреля 2020

Я пытаюсь преодолеть задержки рендеринга и общие "слишком длинные" ошибки нарушения в консоли.

Например, у меня есть onClick, который вызывает setShowModal(true). Когда showModal === true, он рендерит компонент, который обрабатывает длинный объект. В результате onClick вызывает Violation] 'click' handler took 1000ms консольное предупреждение и значительную задержку в способности пользователя взаимодействовать с приложением, пока этот компонент готовится к визуализации.

Чтобы обойти это, я реализовал следующее: 

function SlowComponent(props.lengthyObject) {
    const [initialRenderingComplete, setRenderingComplete] = useState(false);
    const [isProcessing, setIsProcessing] = useState(true)
    const [slowProcessedObject, setSlowProcessedObject] = useState([])

    useEffect(() => {
        if(initialRenderingComplete) {
             setSlowProcessedObject(
                 processData(props.lengthObject)
             )
    }, [initialRenderComplete])

    return isProcessing 
        ? 'This will render pretty quickly' 
        : <div>
             This will take up to 1 second to become available and the browser will complain if I don't render something while the data is processing
             <button onClick={() => triggerAnotherSlowProcess()}>Update lengthy object</button>
        </div>;
}

Короче говоря, это то, как useEffect предназначено для использования, или я должен принять во внимание другую ловушку или стратегию? Есть ли риск утечки памяти с этой настройкой?

...