Add function based components example for Flat list optimisation

[DibyajyotiMishra]

A minor update to the docs addressing the issue : #2880

[netlify]

✔️ Deploy Preview for react-native ready!

🔨 Explore the source changes: b46f752

🔍 Inspect the deploy log: https://app.netlify.com/sites/react-native/deploys/61fd0338a122e70007be1d72

😎 Browse the preview: https://deploy-preview-2955--react-native.netlify.app

[Simek]

Hello @DibyajyotiMishra, thank you for working on the fix for this issue! 👍

Can you use the Tabs components instead of paragraphs to stay more in line with how the Class and Functional components examples are handled across website?

You can find the example use on many Components and APIs page, for example:

• https://github.com/facebook/react-native-website/blob/main/docs/activityindicator.md?plain=1

[DibyajyotiMishra]

Hello @DibyajyotiMishra, thank you for working on the fix for this issue! 👍

Can you use the Tabs components instead of paragraphs to stay more in line with how the Class and Functional components examples are handled across website?

You can find the example use on many Components and APIs page, for example:

• https://github.com/facebook/react-native-website/blob/main/docs/activityindicator.md?plain=1

Sure. I will do that.

[DibyajyotiMishra]

Hello @DibyajyotiMishra, thank you for working on the fix for this issue! 👍
Can you use the Tabs components instead of paragraphs to stay more in line with how the Class and Functional components examples are handled across website?
You can find the example use on many Components and APIs page, for example:

• https://github.com/facebook/react-native-website/blob/main/docs/activityindicator.md?plain=1

Sure. I will do that.

Hi @Simek, are the commits rightly done? Can I expect a merge? Just asking. Never mind. :)

[Simek]

Hi @DibyajyotiMishra, I was going to check this branch out locally to fix the Lint issues, if you can do that for me it would be nice. This is the last thing blocking this PR from merge. :)

[DibyajyotiMishra]

Hi @DibyajyotiMishra, I was going to check this branch out locally to fix the Lint issues, if you can do that for me it would be nice. This is the last thing blocking this PR from merge. :)

Sure. I have done it. Raising a PR.

[DibyajyotiMishra]

Hi @DibyajyotiMishra, I was going to check this branch out locally to fix the Lint issues, if you can do that for me it would be nice. This is the last thing blocking this PR from merge. :)

Hi @Simek , I have fixed all the linting issues. Can you spare some time and may be merge it? 😬

[Simek]

Thank you for the updates, great work, let's ship it! 🚀

Unfortunately Prettier changes might be hard to apply manually, but if you check out repo locally there is a command for that and auto lint also runs on changed files post-commit via hooks, which makes linting files way less annoying.

[DibyajyotiMishra]

Thank you for the updates, great work, let's ship it! 🚀

Unfortunately Prettier changes might be hard to apply manually, but if you check out repo locally there is a command for that and auto lint also runs on changed files post-commit via hooks, which makes linting files way less annoying.

Thanks a lot. I didn’t check the script. I forgot actually. I was in a hurry to fix the linting so I did all of them manually. 😅

[DomiR]

Sorry, but how is this optimizing the Performance?

We replace:

<FlatList renderItem={() => {}} />

with

const f = () => {}
<FlatList renderItem={f} />

I don't see how this can help performance, as f will be different each time... it should be wrapped in useCallback.