React: Are keys useful for any situations other than lists?How to store arbitrary data for some HTML tagsScroll Automatically to the Bottom of the PageAre item keys required when rendering an array in React v15?Big list performance with ReactPerformance implication of duplicate keys on React children in large listsHow to avoid re-renders in nested lists in ReactWhy doesn't React use the object reference as key?Cannot get an ID's of an array elements for key in ReactReact/Redux rendering a list that's updating every secondConvention for React keys for mapped arbitrary strings
Don't teach Dhamma to those who can't appreciate it or aren't interested
Have only girls been born for a long time in this village?
How do I intentionally fragment a SQL Server Index?
Metal that glows when near pieces of itself
Are there categories whose internal hom is somewhat 'exotic'?
How can I describe being temporarily stupid?
Is there such a thing as too inconvenient?
How to avoid using System.String with Rfc2898DeriveBytes in C#
Writing/buying Seforim rather than Sefer Torah
Is there a commercial liquid with refractive index greater than n=2?
Nuclear decay triggers
How big would a Daddy Longlegs Spider need to be to kill an average Human?
How do slats reduce stall speed?
Does C++20 mandate source code being stored in files?
Is this kind of description not recommended?
Is "stainless" a bulk or a surface property of stainless steel?
Story about a demon trying to make a man insane
What is the evidence on the danger of feeding whole blueberries and grapes to infants and toddlers?
Multicolumn in table not centered
How did Apollo 15's depressurization work?
Unbiased estimator of exponential of measure of a set?
Alchemist potion on Undead
Moons that can't see each other
Count the frequency of items in an array
React: Are keys useful for any situations other than lists?
How to store arbitrary data for some HTML tagsScroll Automatically to the Bottom of the PageAre item keys required when rendering an array in React v15?Big list performance with ReactPerformance implication of duplicate keys on React children in large listsHow to avoid re-renders in nested lists in ReactWhy doesn't React use the object reference as key?Cannot get an ID's of an array elements for key in ReactReact/Redux rendering a list that's updating every secondConvention for React keys for mapped arbitrary strings
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
All the information I could find highlight using keys when rendering lists, for example:
<ul>
array.map((item, index) => <li key=index>item</li>)
</ul>
Are there situations other than lists where it's also helpful to provide keys?
Are there downsides to simply providing keys for every non-static element on the page?
javascript arrays reactjs
add a comment |
All the information I could find highlight using keys when rendering lists, for example:
<ul>
array.map((item, index) => <li key=index>item</li>)
</ul>
Are there situations other than lists where it's also helpful to provide keys?
Are there downsides to simply providing keys for every non-static element on the page?
javascript arrays reactjs
add a comment |
All the information I could find highlight using keys when rendering lists, for example:
<ul>
array.map((item, index) => <li key=index>item</li>)
</ul>
Are there situations other than lists where it's also helpful to provide keys?
Are there downsides to simply providing keys for every non-static element on the page?
javascript arrays reactjs
All the information I could find highlight using keys when rendering lists, for example:
<ul>
array.map((item, index) => <li key=index>item</li>)
</ul>
Are there situations other than lists where it's also helpful to provide keys?
Are there downsides to simply providing keys for every non-static element on the page?
javascript arrays reactjs
javascript arrays reactjs
edited Mar 31 at 5:57
kukkuz
34.2k7 gold badges29 silver badges72 bronze badges
34.2k7 gold badges29 silver badges72 bronze badges
asked Mar 27 at 14:44
Ray ZhangRay Zhang
4161 gold badge6 silver badges15 bronze badges
4161 gold badge6 silver badges15 bronze badges
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
You may use keys to reset a component state. See this article for more information : https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
add a comment |
A key is recommended for lists in react because react uses this to identify items that are added, changed or removed.
Keys
Keys help React identify which items have changed, are added, or are
removed. Keys should be given to the elements inside the array to give
the elements a stable identity.
An example with a function component:
function MyListComponent (props)
const list = props.list;
const items= list.map((item) =>
<li key=item.toString()>
item
</li>
);
return (
<ul>items</ul>
);
const array = [1, 2, 3, 4, 5];
ReactDOM.render(
<MyListComponent list=array />,
document.getElementById('root')
);
The only rule is that it must be unique among its siblings.
If you don't use a key - if you don't use a key you'll get a warning.
An id
(identifier of each item in your list) is best for this purposes - if you don't have any identifier that you can use, an index of each item in the list can be used, but its not recommended because this can cause problems in cases where the order of items change.
add a comment |
Keys only give a performance benefit when used in lists. When one value in a list is changed, React knows to only update that value and not the whole list. Keys are helpful because they help keep track of elements when the index changes (note: only use index as key for last resort because if the index changes (i.e. an element is added to the front/middle of a list) React will have to re render the whole list). You can read more about it here: https://reactjs.org/docs/lists-and-keys.html. As for the downsides, I'm going to take an educated guess and say including an extra key attribute that is not used anywhere will slow down your compilation time an unnoticeable amount
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55380017%2freact-are-keys-useful-for-any-situations-other-than-lists%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You may use keys to reset a component state. See this article for more information : https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
add a comment |
You may use keys to reset a component state. See this article for more information : https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
add a comment |
You may use keys to reset a component state. See this article for more information : https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
You may use keys to reset a component state. See this article for more information : https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
answered Mar 27 at 14:54
antoinechalifourantoinechalifour
2851 silver badge8 bronze badges
2851 silver badge8 bronze badges
add a comment |
add a comment |
A key is recommended for lists in react because react uses this to identify items that are added, changed or removed.
Keys
Keys help React identify which items have changed, are added, or are
removed. Keys should be given to the elements inside the array to give
the elements a stable identity.
An example with a function component:
function MyListComponent (props)
const list = props.list;
const items= list.map((item) =>
<li key=item.toString()>
item
</li>
);
return (
<ul>items</ul>
);
const array = [1, 2, 3, 4, 5];
ReactDOM.render(
<MyListComponent list=array />,
document.getElementById('root')
);
The only rule is that it must be unique among its siblings.
If you don't use a key - if you don't use a key you'll get a warning.
An id
(identifier of each item in your list) is best for this purposes - if you don't have any identifier that you can use, an index of each item in the list can be used, but its not recommended because this can cause problems in cases where the order of items change.
add a comment |
A key is recommended for lists in react because react uses this to identify items that are added, changed or removed.
Keys
Keys help React identify which items have changed, are added, or are
removed. Keys should be given to the elements inside the array to give
the elements a stable identity.
An example with a function component:
function MyListComponent (props)
const list = props.list;
const items= list.map((item) =>
<li key=item.toString()>
item
</li>
);
return (
<ul>items</ul>
);
const array = [1, 2, 3, 4, 5];
ReactDOM.render(
<MyListComponent list=array />,
document.getElementById('root')
);
The only rule is that it must be unique among its siblings.
If you don't use a key - if you don't use a key you'll get a warning.
An id
(identifier of each item in your list) is best for this purposes - if you don't have any identifier that you can use, an index of each item in the list can be used, but its not recommended because this can cause problems in cases where the order of items change.
add a comment |
A key is recommended for lists in react because react uses this to identify items that are added, changed or removed.
Keys
Keys help React identify which items have changed, are added, or are
removed. Keys should be given to the elements inside the array to give
the elements a stable identity.
An example with a function component:
function MyListComponent (props)
const list = props.list;
const items= list.map((item) =>
<li key=item.toString()>
item
</li>
);
return (
<ul>items</ul>
);
const array = [1, 2, 3, 4, 5];
ReactDOM.render(
<MyListComponent list=array />,
document.getElementById('root')
);
The only rule is that it must be unique among its siblings.
If you don't use a key - if you don't use a key you'll get a warning.
An id
(identifier of each item in your list) is best for this purposes - if you don't have any identifier that you can use, an index of each item in the list can be used, but its not recommended because this can cause problems in cases where the order of items change.
A key is recommended for lists in react because react uses this to identify items that are added, changed or removed.
Keys
Keys help React identify which items have changed, are added, or are
removed. Keys should be given to the elements inside the array to give
the elements a stable identity.
An example with a function component:
function MyListComponent (props)
const list = props.list;
const items= list.map((item) =>
<li key=item.toString()>
item
</li>
);
return (
<ul>items</ul>
);
const array = [1, 2, 3, 4, 5];
ReactDOM.render(
<MyListComponent list=array />,
document.getElementById('root')
);
The only rule is that it must be unique among its siblings.
If you don't use a key - if you don't use a key you'll get a warning.
An id
(identifier of each item in your list) is best for this purposes - if you don't have any identifier that you can use, an index of each item in the list can be used, but its not recommended because this can cause problems in cases where the order of items change.
edited Apr 5 at 15:15
answered Mar 27 at 14:55
kukkuzkukkuz
34.2k7 gold badges29 silver badges72 bronze badges
34.2k7 gold badges29 silver badges72 bronze badges
add a comment |
add a comment |
Keys only give a performance benefit when used in lists. When one value in a list is changed, React knows to only update that value and not the whole list. Keys are helpful because they help keep track of elements when the index changes (note: only use index as key for last resort because if the index changes (i.e. an element is added to the front/middle of a list) React will have to re render the whole list). You can read more about it here: https://reactjs.org/docs/lists-and-keys.html. As for the downsides, I'm going to take an educated guess and say including an extra key attribute that is not used anywhere will slow down your compilation time an unnoticeable amount
add a comment |
Keys only give a performance benefit when used in lists. When one value in a list is changed, React knows to only update that value and not the whole list. Keys are helpful because they help keep track of elements when the index changes (note: only use index as key for last resort because if the index changes (i.e. an element is added to the front/middle of a list) React will have to re render the whole list). You can read more about it here: https://reactjs.org/docs/lists-and-keys.html. As for the downsides, I'm going to take an educated guess and say including an extra key attribute that is not used anywhere will slow down your compilation time an unnoticeable amount
add a comment |
Keys only give a performance benefit when used in lists. When one value in a list is changed, React knows to only update that value and not the whole list. Keys are helpful because they help keep track of elements when the index changes (note: only use index as key for last resort because if the index changes (i.e. an element is added to the front/middle of a list) React will have to re render the whole list). You can read more about it here: https://reactjs.org/docs/lists-and-keys.html. As for the downsides, I'm going to take an educated guess and say including an extra key attribute that is not used anywhere will slow down your compilation time an unnoticeable amount
Keys only give a performance benefit when used in lists. When one value in a list is changed, React knows to only update that value and not the whole list. Keys are helpful because they help keep track of elements when the index changes (note: only use index as key for last resort because if the index changes (i.e. an element is added to the front/middle of a list) React will have to re render the whole list). You can read more about it here: https://reactjs.org/docs/lists-and-keys.html. As for the downsides, I'm going to take an educated guess and say including an extra key attribute that is not used anywhere will slow down your compilation time an unnoticeable amount
answered Mar 27 at 14:53
Marc Sloth EastmanMarc Sloth Eastman
2981 silver badge13 bronze badges
2981 silver badge13 bronze badges
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55380017%2freact-are-keys-useful-for-any-situations-other-than-lists%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown