From b56d709e6eb9da4ab4d73725d5df849dfd6c26c0 Mon Sep 17 00:00:00 2001 From: Sam Zhou Date: Tue, 4 Oct 2022 18:51:59 -0700 Subject: [PATCH] Annotate `useCallback` in xplat (11/n) Summary: Add explicit annotations to useCallback as required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predictable. Codemod command: `flow codemod annotate-use-callback` drop-conflicts bypass-lint Changelog: [Internal] Reviewed By: evanyeung Differential Revision: D40079418 fbshipit-source-id: 59750a5d07b2ac1f440927794a7523682f048a5e --- Libraries/Animated/useAnimatedProps.js | 2 +- Libraries/Utilities/useRefEffect.js | 2 +- packages/rn-tester/js/RNTesterAppShared.js | 4 ++-- .../RNTesterPlatformTestResultView.js | 2 +- .../PlatformTest/usePlatformTestHarness.js | 2 +- .../js/examples/FlatList/FlatList-nested.js | 17 +++++++++++++++-- .../FlatList/FlatList-onViewableItemsChanged.js | 4 +++- 7 files changed, 24 insertions(+), 9 deletions(-) diff --git a/Libraries/Animated/useAnimatedProps.js b/Libraries/Animated/useAnimatedProps.js index d7329a7e606..137a8de6200 100644 --- a/Libraries/Animated/useAnimatedProps.js +++ b/Libraries/Animated/useAnimatedProps.js @@ -60,7 +60,7 @@ export default function useAnimatedProps( // But there is no way to transparently compose three separate callback refs, // so we just combine them all into one for now. const refEffect = useCallback( - instance => { + (instance: TInstance) => { // NOTE: This may be called more often than necessary (e.g. when `props` // changes), but `setNativeView` already optimizes for that. node.setNativeView(instance); diff --git a/Libraries/Utilities/useRefEffect.js b/Libraries/Utilities/useRefEffect.js index b79a644b83c..26446cbf536 100644 --- a/Libraries/Utilities/useRefEffect.js +++ b/Libraries/Utilities/useRefEffect.js @@ -31,7 +31,7 @@ export default function useRefEffect( ): CallbackRef { const cleanupRef = useRef<(() => void) | void>(undefined); return useCallback( - instance => { + (instance: null | TInstance) => { if (cleanupRef.current) { cleanupRef.current(); cleanupRef.current = undefined; diff --git a/packages/rn-tester/js/RNTesterAppShared.js b/packages/rn-tester/js/RNTesterAppShared.js index fc35f5c89f5..49094edf4c2 100644 --- a/packages/rn-tester/js/RNTesterAppShared.js +++ b/packages/rn-tester/js/RNTesterAppShared.js @@ -111,7 +111,7 @@ const RNTesterApp = (): React.Node => { ); const handleModuleExampleCardPress = React.useCallback( - exampleName => { + (exampleName: string) => { dispatch({ type: RNTesterActionsType.EXAMPLE_CARD_PRESS, data: {key: exampleName}, @@ -131,7 +131,7 @@ const RNTesterApp = (): React.Node => { ); const handleNavBarPress = React.useCallback( - args => { + (args: {screen: string}) => { dispatch({ type: RNTesterActionsType.NAVBAR_PRESS, data: {screen: args.screen}, diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js index 8cdc2d04915..3a9540468ea 100644 --- a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js @@ -68,7 +68,7 @@ function FilterModalButton(props: FilterModalProps) { setModalVisible(false); }, []); - const onPendingTextChange = useCallback(newText => { + const onPendingTextChange = useCallback((newText: string) => { setPendingFilterText(newText); }, []); diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/usePlatformTestHarness.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/usePlatformTestHarness.js index 967c336baae..8c55230414e 100644 --- a/packages/rn-tester/js/examples/Experimental/PlatformTest/usePlatformTestHarness.js +++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/usePlatformTestHarness.js @@ -106,7 +106,7 @@ function constructAsyncTestHook( }); }, [description]); - const stepHandler = useCallback(testCase => { + const stepHandler = useCallback((testCase: PlatformTestCase) => { const stepAssertions = runTestCase(testCase); assertionsRef.current.push(...stepAssertions); }, []); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-nested.js b/packages/rn-tester/js/examples/FlatList/FlatList-nested.js index b2b1689d2db..f2d1282a5a7 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-nested.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-nested.js @@ -16,6 +16,7 @@ import {FlatList, StyleSheet, Text, View} from 'react-native'; import RNTesterPage from '../../components/RNTesterPage'; import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; +import type {ViewToken} from '../../../../../Libraries/Lists/ViewabilityHelper'; type OuterItem = 'head' | 'vertical' | 'horizontal' | 'filler'; @@ -78,7 +79,13 @@ function NestedListExample(): React.Node { const [inner, dispatchInner] = useReducer(reducer, initialItemsState); const onViewableItemsChanged = useCallback( - ({changed}) => { + ({ + changed, + }: { + changed: Array, + viewableItems: Array, + ... + }) => { for (const token of changed) { dispatchOuter({ type: token.isViewable ? 'add-viewable' : 'remove-viewable', @@ -162,7 +169,13 @@ function OuterItemRenderer({ }, [dispatchOuter, index]); const onViewableItemsChanged = useCallback( - ({changed}) => { + ({ + changed, + }: { + changed: Array, + viewableItems: Array, + ... + }) => { for (const token of changed) { dispatchInner({ type: token.isViewable ? 'add-viewable' : 'remove-viewable', diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js index 8f35338ccb1..981d226dc1e 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js @@ -9,7 +9,9 @@ */ 'use strict'; + import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; +import type {ViewToken} from '../../../../../Libraries/Lists/ViewabilityHelper'; import BaseFlatListExample from './BaseFlatListExample'; import {StyleSheet, View, FlatList} from 'react-native'; import * as React from 'react'; @@ -32,7 +34,7 @@ export function FlatList_onViewableItemsChanged(props: { const {viewabilityConfig, offScreen, horizontal, useScrollRefScroll} = props; const [output, setOutput] = React.useState(''); const onViewableItemsChanged = React.useCallback( - info => + (info: {changed: Array, viewableItems: Array, ...}) => setOutput( info.viewableItems .filter(viewToken => viewToken.index != null && viewToken.isViewable)