We often get asked to render a list in a React interview. In this article we are going to look at a basic implementation and come up with four ways...
For further actions, you may consider blocking this person and/or reporting abuse
Nice article!
One suggestion for 1. Specify key: Sometimes your data structure doesn’t contain a usable value necessary for the
key. In those cases we can use the second.map()parameter (index) to generate our keys on the fly like so:Edit: You should only use the array index for your keys if your array is static and there is no requirement for filtering nor sorting. Examples could be your primary navigation menu, or a list of tags associated with an article, or even a list of posts.
Source: developer.mozilla.org/en-US/docs/W...
The index of an element should not be used as a key, as the order could change.
Here is some more info on the subject:
React official docs
robinpokorny.com/blog/index-as-a-k...
Absolutely agree—if you are intending to manipulate or update the array (by adding, removing or re-ordering the items) then a generated key (or if available, an array item prop) is definitely the way to go.
But... if the array is static and never to be filtered nor sorted, then using the array index is perfectly fine—"Horses for courses" 🏇
There was no mention in the OP that array manipulation was an expectation, which was the basis for my suggestion. I'll edit my original comment for clarification.
Never thought of it that way, excellent reasoning!
It's only partially true
Don't use the ID as the key if the order might change, but there are a bunch of cases where the order of the elements won't change, in which case you can use the ID as the key (unless you have no other options)
The documentation says it's not recommended, but it's not forbidden either to use ID as key, In documentation you can even read that
Never use useMemo or any memorization at first place. useMemo() basically compares new changes with old changes, and each comparison takes time than normal program flow. Use it only when it's necessary
Yes, we should only memoize when it's necessary. In this article we memoized the component that was re-rendering 100 posts every time the the parent state changed but we chose not to memoize inside of the item component. Adding memoization adds code complexity and additional code execution...sometimes these costs don't outweigh the benefits. There might be ways to avoid re-rendering by restructuring the app as well: Before You memo().
I love that article - "Before You memo()" !
That gave me way more insight than the ubiquitous "just use memo or callback" 'hack' which gets thrown around everywhere you look. Sprinkling 'use memo' all over your code just doesn't feel right.
But I stand by my opinion that this sort of "low level" mechanical thing should be taken care of by the framework rather than the programmer (hence why I'm still more impressed by Vue than by React).
I don't know, this is what still bugs me about React, compared to Vue - Vue is more like - it lets you code the logic, and tries to optimize the reactivity and the rendering itself, while with React the burden is more on the programmer (as your "useMemo" and "useCallback" examples show).
Vue just does more for you, and on top of that it's even smaller, and more performant ... but yeah React has the jobs and the popularity :-P
Considering point 4 is about accessibility, I'm surprised you chose to use buttons inside a div instead of an ul with lis, coupled with tabIndexes or something in that spirit. It would've been way more semantic, considering we are rendering a list.
Some time Post onClick is costlier if no of post grows. So use event delegation technique so that both onClick and useCallback can be removed.
Nice tips
This is a great article! I am a junior React developer and I am preparing for interviews and this will be of great help. Thank you!
Hallo can we like each other's posts?