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;








2















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?










share|improve this question
































    2















    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?










    share|improve this question




























      2












      2








      2








      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?










      share|improve this question
















      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      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

























          3 Answers
          3






          active

          oldest

          votes


















          1














          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






          share|improve this answer
































            0














            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.






            share|improve this answer


































              -1














              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






              share|improve this answer



























                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
                );



                );













                draft saved

                draft discarded


















                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









                1














                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






                share|improve this answer





























                  1














                  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






                  share|improve this answer



























                    1












                    1








                    1







                    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






                    share|improve this answer













                    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







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Mar 27 at 14:54









                    antoinechalifourantoinechalifour

                    2851 silver badge8 bronze badges




                    2851 silver badge8 bronze badges


























                        0














                        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.






                        share|improve this answer































                          0














                          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.






                          share|improve this answer





























                            0












                            0








                            0







                            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.






                            share|improve this answer















                            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.







                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            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
























                                -1














                                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






                                share|improve this answer





























                                  -1














                                  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






                                  share|improve this answer



























                                    -1












                                    -1








                                    -1







                                    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






                                    share|improve this answer













                                    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







                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered Mar 27 at 14:53









                                    Marc Sloth EastmanMarc Sloth Eastman

                                    2981 silver badge13 bronze badges




                                    2981 silver badge13 bronze badges






























                                        draft saved

                                        draft discarded
















































                                        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.




                                        draft saved


                                        draft discarded














                                        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





















































                                        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







                                        Popular posts from this blog

                                        Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

                                        Swift 4 - func physicsWorld not invoked on collision? The Next CEO of Stack OverflowHow to call Objective-C code from Swift#ifdef replacement in the Swift language@selector() in Swift?#pragma mark in Swift?Swift for loop: for index, element in array?dispatch_after - GCD in Swift?Swift Beta performance: sorting arraysSplit a String into an array in Swift?The use of Swift 3 @objc inference in Swift 4 mode is deprecated?How to optimize UITableViewCell, because my UITableView lags

                                        Access current req object everywhere in Node.js ExpressWhy are global variables considered bad practice? (node.js)Using req & res across functionsHow do I get the path to the current script with Node.js?What is Node.js' Connect, Express and “middleware”?Node.js w/ express error handling in callbackHow to access the GET parameters after “?” in Express?Modify Node.js req object parametersAccess “app” variable inside of ExpressJS/ConnectJS middleware?Node.js Express app - request objectAngular Http Module considered middleware?Session variables in ExpressJSAdd properties to the req object in expressjs with Typescript