React/React Native viewableItems 解构问题

Question

This is React/React Native but the question I feel is related to JavaScript. Anyway, this is what I have:

onViewableItemsChanged={({ viewableItems }) => {
    if (viewableItems.length > 0) {
        setActiveIndex(viewableItems[0].index || 0)
    }
}}

Here, viewableItems is something that is destructured. We can access it because we are working with onViewableItemsChanged . But when I move this function elsewhere, such as:

onViewableItemsChanged={onFlatlistUpdate}

const onFlatlistUpdate = useCallback(({ viewableItems }) => {
    if (viewableItems.length > 0) {
        setActiveIndex(viewableItems[0].index || 0)
    }
}, [])

I dont get where viewableItems is from? I mean in the first example, it is destructured from the context of onViewableItemsChanged . However in the second example, it is completely independent, away from onViewableItemsChanged (of course we are using useCallback but it does not matter) so how come we have access to it?

TL DR: In the 2nd example (onFlatlistUpdate), where is viewableItems destructured from/how come we have access to viewableItems ?

Answer 1

In both examples, you're passing a function to the onViewableItemsChanged prop. In the first case, you're creating an anonymous function inline, and that function reference is passed to onViewableItemsChanged . In your second case, you're creating a function with useCallback() which you're then passing to onViewableItemsChanged (the function returned by useCallback() will forward any of the arguments it's passed to the function you give it). Internally, the FlatList component with the onViewableItemsChanged prop will call that function and pass an object with viewableItems , such as onViewableItemsChanged({viewableItems: ...}) . This allows you to destructure the object within the function you've passed to your FlatList component.

I mean in the first example, it is destructured from the context of onViewableItemsChanged

onViewableItemsChanged doesn't really have a "context". onViewableItemsChanged is just a prop that you pass a function to. How that function is then called within FlatList determines the arguments of the function. That's handled by the internals of FlatList component which you don't need to worry much about. You can create that function independently, or create it inline, in both cases, you're passing a function reference to onViewableItemsChanged that can be called by FlatList .

Take the following example code using vanilla JS, as we pass a callback function to another function for it to be invoked. It doesn't matter if we define the function as standalone or inline, all the really matters is that we end up passing a function to myFlatList :

 const myFlatList = (onViewableItemsChanged) => { onViewableItemsChanged({viewableItems: [1, 2, 3]}); } // Defining the callback function inline myFlatList(({viewableItems}) => { console.log("inline", viewableItems); }); // Similar to your `useCallback()` definition const callbackFn = ({viewableItems}) => { console.log("independent", viewableItems); } myFlatList(callbackFn);