inflearn logo
강의

Course

Instructor

Things They Don't Teach You in Bootcamps (React Rendering Optimization) Part 2

Improve user experience with fast responsiveness with useTransition

useTransition 질문입니다!

418

kdh5998

25 asked

1

강의의 useTransition을 사용한 부분에서 input 태그의 value를 deferedFilter로 설정하고 handleChange 내의 setFilter를 제거해도 문제가 없나요?

아니면 input에서 다루는 value와 Words를 렌더링하기 위한 filter value를 따로 관리해야 하나요?

이렇게 해도 문제가 없는지 궁금합니다!

react

Answer 2

0

Rudolf

삭제된 글입니다

0

aftercamp

image스크롤 살짝 내려보시면 링크가 있습니다!

0

aftercamp

안녕하세요 도현님!

우선 질문에 대한 답을 하기 이전에 몇가지를 명확히 하자면,

filter: 사용자가 입력하는 즉시 입력값을 나타냅니다.

deferredFilter: 필터링 프로세스에 사용되는 값을 나타냅니다. 이 값에 대한 업데이트는 전환 중에 지연되어 값비싼 계산을 방지합니다.

각각의 state들의 역할은 위와 같습니다.

deferedFilter를 input에다가 넣으셨는데 그렇게 하면 빠르게 asdf를 입력했을 때 얼마나 빨리 입력하느냐에 따라 다르겠지만 저 같은 경우엔 as 가 생략되고 인풋에 df만 입력된 것처럼 렌더링이 되었습니다.

왜 그러냐면 제가 강의에서도 알려드렸지만 startTransition 블럭 내에서 상태 업데이트가 되면 렌더링 우선순위가 낮아지기 때문에 입력한 값의 일부가 소실됩니다 (렌더링 우선순위에 밀려서 생략)

그래서 결론은 스크린샷처럼 하면 문제가 될 수 있을 것 같습니다!

 

 

0

kdh5998

답변 감사합니다!!

git 초기설정하고 Next Js 설치하는게 너무 어렵습니다.

0

8

1

커서 색상 및 클로드코드 프롬프트 입력칸 설정 문의

0

9

1

81강 실습 자료 없음

0

8

1

클로드 질문에서 줄 바꿈

0

12

1

2강 퀴즈를 푸려는데 자꾸 수강하지 않은 수업이있는데.. 다들었습니다 ㅜ

0

16

1

서브에이전트 실행중에도 대기해야 할까요?

0

11

1

소스코드 제공여부

0

22

2

궁금했던 질문입니다. 바로 콤마위치 입니다.

0

16

1

62강 실습자료가 잘못되었습니다.

0

17

1

37강에서 ROADMAP.md 파일

0

37

2

.claude, setting~, permission 했을 때 Bash 안 보여요

0

28

2

[미션4] open with Live Server 클릭시 브라우저 안뜸

0

34

3

사용량 한도 도달

0

41

2

Cursor를 실행했을 때 나오는 화면이 달라요

0

30

2

Claude code 대화하는 부분이 위치변경 문의 드립니다.

0

34

2

기본 파일 구조

0

34

2

setting.local.json 파일 안보일떄

0

34

2

Shrimp Task Manager와 Fable5 plan모드 성능비교

0

39

2

git hub 들어가서 setting >> pages 들어갔는데

0

39

2

git config 오류 관련 문의

0

43

2

task master, shrimp task manager 질문있어요

0

24

1

Automatic batching에 관해 궁금한 점이 있습니다.

0

125

1

쓰레드 관련

1

443

1

Virtualized List 에 관한 질문이 있습니다.

3

530

1