Различия

Показаны различия между двумя версиями страницы.

--- type_script [2024/05/04 11:06]
tro
+++ type_script [2024/05/04 11:18] (текущий)
tro
@@ Строка 293: / Строка 293: @@
 npm install --save-dev @types/react-router-dom
 </code>
+==== Хуки, які зазвичай не потрібно типізувати ====
+==== useEffect ====
+useEffect очікує, що функція, що передається, буде повертати void або функцію очищення, яка теж повертає void. Усі ці типи ми можемо не вказувати, і просто писати так:
+<code>
+useEffect(() => {
+    let isActive = true;
+    return (): void => {
+      isActive = false;
+    };
+  }, []);
+</code>
+==== useMemo ====
+У цьому прикладі ми використовуємо хук useMemo для оптимізації продуктивності. Ми створюємо мемоізоване значення selectedUser, яке перераховується лише за зміни users або selectedUserId.
+<code>
+import React, { useMemo } from 'react';
+type User = {
+  id: number;
+  name: string;
+};
+type Props = {
+  users: User[];
+  selectedUserId: number;
+};
+export function UserList({ users, selectedUserId }: Props) {
+  const selectedUser = useMemo(() => {
+    return users.find(user => user.id === selectedUserId);
+  }, [users, selectedUserId]);
+  return (
+    <div>
+      {selectedUser && <p>Selected user is {selectedUser.name}</p>}
+      {users.map(user => (
+        <p key={user.id}>{user.name}</p>
+      ))}
+    </div>
+  );
+}
+</code>