base on A better list for React Native  <div align="center"> <a href="https://shopify.github.io/flash-list/">Website</a> • <a href="https://discord.gg/k2gzABTfav">Discord</a> • <a href="https://shopify.github.io/flash-list/docs/">Getting started</a> • <a href="https://shopify.github.io/flash-list/docs/usage">Usage</a> • <a href="https://shopify.github.io/flash-list/docs/fundamentals/performant-components">Writing performant components</a> • <a href="https://shopify.github.io/flash-list/docs/known-issues">Known Issues</a> <br><br> **Fast & performant React Native list. No more blank cells.** Swap from FlatList in seconds. Get instant performance. </div> # FlashList v2 FlashList v2 has been rebuilt from the ground up for RN's new architecture and delivers fast performance, higher precision, and better ease of use compared to v1. We've achieved all this while moving to a JS-only solution! One of the key advantages of FlashList v2 is that it doesn't require any estimates. It also introduces several new features compared to v1. To know more about what's new in v2 click [here](https://shopify.github.io/flash-list/docs/v2-changes). > ⚠️ **IMPORTANT:** FlashList v2.x has been designed to fully leverage the new architecture. **Old architecture will only be supported while FlashList v2 is in alpha/beta/rc and will be dropped once it's ready.** When run on old architecture, we just fall back to v1.x which doesn't have any of the new features. ### Is v2 production ready? Yes, please use one of the release candidates if you want to ship to production `2.0.0-rc.x`. While we can make some changes in the final version, we expect release candidates to be quite stable. Use the alpha track if you want to test new changes quickly and don't mind occasional bugs. > ⚠️ **IMPORTANT:** FlashList v2.x's alpha track moves quickly and can have some issues. Please report any issues or edge cases you run into. We're actively working on testing and optimizing v2. We also highly recommend using it with RN 0.78+ for optimal performance. ### Old architecture / FlashList v1 If you're running on old architecture or using FlashList v1.x, you can access the documentation specific to v1 here: [FlashList v1 Documentation](https://shopify.github.io/flash-list/docs/1.x/). ### Web support FlashList v2 has web support. Most of the features should work but we're not actively testing it right now. If you run into an issue, please raise it on GitHub. ## Installation Add the package to your project via `yarn add @shopify/flash-list@rc` and run `pod install` in the `ios` directory. ## Usage But if you are familiar with [FlatList](https://reactnative.dev/docs/flatlist), you already know how to use `FlashList`. You can try out `FlashList` by changing the component name or refer to the example below: ```jsx import React from "react"; import { View, Text } from "react-native"; import { FlashList } from "@shopify/flash-list"; const DATA = [ { title: "First Item", }, { title: "Second Item", }, ]; const MyList = () => { return ( <FlashList data={DATA} renderItem={({ item }) => <Text>{item.title}</Text>} /> ); }; ``` To avoid common pitfalls, you can also follow these steps for migrating from `FlatList`, based on our own experience: 1. Simply change from `FlatList` to `FlashList` and render the list. 2. **Important**: Scan your [`renderItem`](https://shopify.github.io/flash-list/docs/usage/#renderitem) hierarchy for explicit `key` prop definitions and remove them. If you’re doing a `.map()` use our hook called [`useMappingHelper`](https://shopify.github.io/flash-list/docs/usage/#usemappinghelper). 3. Check your [`renderItem`](https://shopify.github.io/flash-list/docs/usage/#renderitem) hierarchy for components that make use of `useState` and verify whether that state would need to be reset if a different item is passed to that component (see [Recycling](https://shopify.github.io/flash-list/docs/recycling)) 4. If your list has heterogenous views, pass their types to `FlashList` using [`getItemType`](https://shopify.github.io/flash-list/docs/usage/#getitemtype) prop to improve performance. 5. Do not test performance with JS dev mode on. Make sure you’re in release mode. `FlashList` can appear slower while in dev mode due to a small render buffer. 6. Memoizing props passed to FlashList is more important in v2. v1 was more selective about updating items, but this was often perceived as a bug by developers. We will not follow that approach and will instead allow developers to ensure that props are memoized. We will stop re-renders of children wherever it is obvious. ## Other things to know - `keyExtractor` is important to prevent glitches due to item layout changes when going upwards. We highly recommend having a valid `keyExtractor` with v2. - `useLayoutState`: This is similar to `useState` but communicates the change in state to FlashList. It's useful if you want to resize a child component based on a local state. Item layout changes will still be detected using `onLayout` callback in the absence of `useLayoutState`, which might not look as smooth on a case-by-case basis. ```jsx import { useLayoutState } from "@shopify/flash-list"; const MyItem = ({ item }) => { const [isExpanded, setIsExpanded] = useLayoutState(false); const height = isExpanded ? 150 : 80; return ( <Pressable onPress={() => setIsExpanded(!isExpanded)}> <View style={{ height, padding: 16 }}> <Text>{item.title}</Text> </View> </Pressable> ); }; ``` - `useRecyclingState`: Similar to `useState` but accepts a dependency array. On change of deps, the state gets reset without an additional `setState` call. Useful for maintaining local item state if really necessary. It also has the functionality of `useLayoutState` built in. ```jsx import { useRecyclingState } from "@shopify/flash-list"; const GridItem = ({ item }) => { const [isExpanded, setIsExpanded] = useRecyclingState( false, [item.id], () => { // runs on reset. Can be used to reset scroll positions of nested horizontal lists } ); const height = isExpanded ? 100 : 50; return ( <Pressable onPress={() => setIsExpanded(!isExpanded)}> <View style={{ height, backgroundColor: item.color }}> <Text>{item.title}</Text> </View> </Pressable> ); }; ``` - `useMappingHelper`: Returns a function that helps create optimal mapping keys for items when using `.map()` in your render methods. Using this ensures optimized recycling and performance for FlashList. ```jsx import { useMappingHelper } from "@shopify/flash-list"; const MyComponent = ({ items }) => { const { getMappingKey } = useMappingHelper(); return ( <FlashList data={items} renderItem={({ item }) => <ItemComponent item={item} />} /> ); }; // When mapping over items inside components: const NestedList = ({ items }) => { const { getMappingKey } = useMappingHelper(); return ( <View> {items.map((item, index) => ( <Text key={getMappingKey(item.id, index)}>{item.title}</Text> ))} </View> ); }; ``` - If you're nesting horizontal FlashLists in vertical lists, we highly recommend the vertical list to be FlashList too. We have optimizations to wait for child layout to complete which can improve load times. ## App / Playground The [fixture](./fixture/) is an example app showing how to use the library. ", Assign "at most 3 tags" to the expected json: {"id":"10919","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"