🧩`useOptimistic``useOptimistic` 는 낙관적(optimistically)으로 UI를 업데이트 할 수 있도록 하는 React Hook 이다.  const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);🧩레퍼런스`useOptimistic(state, updateFn)``useOptimistic`은 aysnc action 이 진행되는 동안 다른 state를 보여준다. 이 말을 예시를 들어 설명하면 이렇다. 만약 우리가 인스타그램을 하다가 좋아요 버튼을 클릭한다고 가정하면 유저가 그 게시물에대해 좋아요를 했다는 정보를 서버에 저장하기 위해서 서버에 http request를 하고 서버에서 해당 작업을 완료한 뒤 서..

🧩배경react 19 에 도입된 `useActionState` hook 학습한뒤 해당 hook을 활용한 예시를 만들어보았다.🧩useActionState 특징`useActionState`는 form action의 결과를 기준으로 state를 업데이트 하는 훅`const [state, formAction, isPending] = useActionState(fn, initialState, permalink?)` 와 같이 사용Canary versions 에서는 `useFromState`로 불림hook이지만 서버컴포넌트에서도 사용 가능하다.  반드시 tag 내부에서 사용해야함 🧩활용예시`useActionState`를 이용하여 위와 같은 화면을 만들어 보았다. 위 화면의 동작 흐름은 아래와 같다.첫 화면 렌..

✅useMemo란?useMemo는 재렌더링 사이에 계산결과 값을 캐싱하는 hook이다.useMemo를 사용하면 재 렌더링 시 캐싱된 값을 그대로 사용하므로 불필요한 계산과정을 스킵하여 컴포넌트 렌더링 시간을 단축시킬 수 있다. 그렇다고 무조건 useMemo를 사용해야 되냐? 그것은 아니다. 오히려 대부분의 곳에서 useMemo는 오히려 불필요하고 특정한 상황에서 사용 시 성능상 이점을 가져 갈 수 있다.  ✅useMemo 예시 코드만약 `filterTodos(todos,tab)` 함수가 2초가 걸린다고 가정해보자 그럼 아래와같이 useMemo 없이 코드가 쓰였을때 `TodoList` 컴포넌트가 재랜더링이 될 때마다 `filterTodos(todos, tab)` 가 실행되면서 TodoList 컴포넌트가 렌..