diff --git a/fixture/react-native/src/Chat.tsx b/fixture/react-native/src/Chat.tsx index 56bc48421..42a06d991 100644 --- a/fixture/react-native/src/Chat.tsx +++ b/fixture/react-native/src/Chat.tsx @@ -42,9 +42,7 @@ export function Chat() { }, []); const addMessageAtBottom = useCallback(() => { - const newMessage = generateRandomMessage(messages.length); - setMessages((prev) => [...prev, newMessage]); - // eslint-disable-next-line react-hooks/exhaustive-deps + setMessages((prev) => [...prev, generateRandomMessage(prev.length)]); }, []); const renderItem = useCallback((info: { item: ChatMessage }) => { diff --git a/fixture/react-native/src/ChatUnstableItems.tsx b/fixture/react-native/src/ChatUnstableItems.tsx index c633927d4..8cf5f72dd 100644 --- a/fixture/react-native/src/ChatUnstableItems.tsx +++ b/fixture/react-native/src/ChatUnstableItems.tsx @@ -81,7 +81,7 @@ export function ChatUnstableItems() { return () => clearTimeout(id); }, [scrollTarget]); - const scrollToItem25 = useCallback(() => { + const scrollToItem150 = useCallback(() => { setScrollTarget(150); }, []); @@ -131,9 +131,9 @@ export function ChatUnstableItems() { - Scroll to 25 + Scroll to 150 diff --git a/fixture/react-native/src/Messages/Messages.tsx b/fixture/react-native/src/Messages/Messages.tsx index 9c73dba2c..bdff28a48 100644 --- a/fixture/react-native/src/Messages/Messages.tsx +++ b/fixture/react-native/src/Messages/Messages.tsx @@ -19,7 +19,7 @@ const Messages = () => { sender: userName, type: MessageType.Text, } as Message; - setMessages([...messages, message]); + setMessages((previous) => [...previous, message]); }; return ( diff --git a/fixture/react-native/src/Messages/MessagesFlatList.tsx b/fixture/react-native/src/Messages/MessagesFlatList.tsx index cc0789b6e..75ab68795 100644 --- a/fixture/react-native/src/Messages/MessagesFlatList.tsx +++ b/fixture/react-native/src/Messages/MessagesFlatList.tsx @@ -24,7 +24,7 @@ const MessagesFlatList = () => { type: MessageType.Text, } as Message; - setMessages([message, ...messages]); + setMessages((previous) => [message, ...previous]); }; return ( diff --git a/fixture/react-native/src/PaginatedList.tsx b/fixture/react-native/src/PaginatedList.tsx index 923a96362..029b206fe 100644 --- a/fixture/react-native/src/PaginatedList.tsx +++ b/fixture/react-native/src/PaginatedList.tsx @@ -47,11 +47,9 @@ export default class PaginatedList extends React.Component { onEndReached={() => { console.log("onEndReached"); // Since FlatList is a pure component, data reference should change for a render - const elems = [...this.state.elems]; - elems.push(...this._generateArray(elems.length, 20)); - this.setState(() => { - return { elems }; - }); + this.setState(({ elems }: PaginatedListState) => ({ + elems: [...elems, ...this._generateArray(elems.length, 20)], + })); }} onStartReached={() => { console.log("onStartReached"); diff --git a/fixture/web/Chat.tsx b/fixture/web/Chat.tsx index 56bc48421..42a06d991 100644 --- a/fixture/web/Chat.tsx +++ b/fixture/web/Chat.tsx @@ -42,9 +42,7 @@ export function Chat() { }, []); const addMessageAtBottom = useCallback(() => { - const newMessage = generateRandomMessage(messages.length); - setMessages((prev) => [...prev, newMessage]); - // eslint-disable-next-line react-hooks/exhaustive-deps + setMessages((prev) => [...prev, generateRandomMessage(prev.length)]); }, []); const renderItem = useCallback((info: { item: ChatMessage }) => {