Summary

The current example for using extraData in the flatlist does not actually require the extraData prop to rerender the selectedId. This commit is to contrive an example where extraData in the flatList makes a difference. However, another alternative solution that I might suggest is to remove it from the documentation entirely because extraData seems less relevant to the functional paradigm. I'm also relatively new to RN so perhaps there's something that I'm missing as well.

Details

The existing example runs fine without the extraData prop at all because the functional component re-creates the renderItem function reference on every call to the App function when the selectId state is set. Since the renderItem reference changes to the flatList, it re-renders.

I'm not sure the modifications are a good example because in order to contrive the simplest possible example I could imagine I needed to additionally use the useCallback and useRef hooks. (You could of course pass a renderItem without the callback dependency of selectId, but I think that's worse pedagogically). This means increasing the complexity of the example, but I'm not sure otherwise how to contrive an example that actually uses extraData in the functional paradigm.

I'm curious if anyone has a better example - my feeling is that the extraData prop was something beginners would run into much more often in the class paradigm because you could pass non-reactive persistent state which lived on the class to the list.

However, in the functional paradigm I don't think this is possible because the useRef hook (which to my understanding serves as this replacement for mutable class state) requires the .current property getter to fetch data, which is then assigned a reference if passed into the flatlist as data, and hence would change on every render cycle. Similarly, if you are passing data in state the flatlist will also rerender every cycle. So unless I'm misunderstanding something in how the functional paradigm works (which is totally possible, I'm pretty new to RN) then it seems like the usage of extraData would never arise in normal circumstances. I think you only run into it if you pass some form of data to a renderItem method wrapped in a callback, which I can imagine might be relevant for some performance optimization.

May 30 '21 13:05 kafischer

Hi @kafischer!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!