What is “updating” in React?












5














As React Documentation says:




componentDidUpdate() is invoked immediately after updating occurs




But I've noticed that componentDidUpdate() is invoked even a browser DOM element isn't updated.



So, what does the React Documentation mean by updating occurs?






javascript reactjs







share|improve this question


















  • 2




    It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
    – DBS
    Nov 12 at 15:05
















5














As React Documentation says:




componentDidUpdate() is invoked immediately after updating occurs




But I've noticed that componentDidUpdate() is invoked even a browser DOM element isn't updated.



So, what does the React Documentation mean by updating occurs?






javascript reactjs







share|improve this question


















  • 2




    It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
    – DBS
    Nov 12 at 15:05














5












5








5







As React Documentation says:




componentDidUpdate() is invoked immediately after updating occurs




But I've noticed that componentDidUpdate() is invoked even a browser DOM element isn't updated.



So, what does the React Documentation mean by updating occurs?






javascript reactjs







share|improve this question













As React Documentation says:




componentDidUpdate() is invoked immediately after updating occurs




But I've noticed that componentDidUpdate() is invoked even a browser DOM element isn't updated.



So, what does the React Documentation mean by updating occurs?






javascript reactjs




javascript reactjs






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 12 at 15:02









Roman Roman

30711




30711








  • 2




    It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
    – DBS
    Nov 12 at 15:05














  • 2




    It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
    – DBS
    Nov 12 at 15:05








2




2




It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
– DBS
Nov 12 at 15:05




It's important to remember that the component and the DOM element aren't the same thing, just because the DOM doesn't change, the component may still have recieved updates.
– DBS
Nov 12 at 15:05












4 Answers
4






active

oldest

votes


















3














"updating" is not DOM updates only but is part of the life cycle.

It occurs when there are new props, state updates and force updates



You can see this part in this diagram taken from the DOCS



enter image description here






share|improve this answer



















  • 1




    Thanks. It's what I wanted to know
    – Roman Roman
    Nov 12 at 15:07



















1














componentDidUpdate is invoked when the render function within a component is called. This can happen when state or props changes. It can also happen when forceUpdate is called.



Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated. In your case, probably, though the render function was triggered, there was no change in the virtual DOM and hence there was no DOM update.






share|improve this answer





























    1














    componentDidUpdate will run if there are any STATE, or PROP changes made to the component after the initial render, whether or not the change is effecting the DOM.






    share|improve this answer





























      1














      The arguments of the componentDidUpdate should satisfy your query. The prevProps, prevState, snapshot are those data that gets updated from some other hooks. And at that time, you'll need componentDidUpdate to handle the update.



      This picture should give you detailed information on updates:



      enter image description here



      So, you can see componentDidUpdate() is invoked immediately after updating occurs.






      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%2f53264873%2fwhat-is-updating-in-react%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        4 Answers
        4






        active

        oldest

        votes








        4 Answers
        4






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        3














        "updating" is not DOM updates only but is part of the life cycle.

        It occurs when there are new props, state updates and force updates



        You can see this part in this diagram taken from the DOCS



        enter image description here






        share|improve this answer



















        • 1




          Thanks. It's what I wanted to know
          – Roman Roman
          Nov 12 at 15:07
















        3














        "updating" is not DOM updates only but is part of the life cycle.

        It occurs when there are new props, state updates and force updates



        You can see this part in this diagram taken from the DOCS



        enter image description here






        share|improve this answer



















        • 1




          Thanks. It's what I wanted to know
          – Roman Roman
          Nov 12 at 15:07














        3












        3








        3






        "updating" is not DOM updates only but is part of the life cycle.

        It occurs when there are new props, state updates and force updates



        You can see this part in this diagram taken from the DOCS



        enter image description here






        share|improve this answer














        "updating" is not DOM updates only but is part of the life cycle.

        It occurs when there are new props, state updates and force updates



        You can see this part in this diagram taken from the DOCS



        enter image description here







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 12 at 15:08

























        answered Nov 12 at 15:07









        Sagiv b.g

        15.8k21954




        15.8k21954








        • 1




          Thanks. It's what I wanted to know
          – Roman Roman
          Nov 12 at 15:07














        • 1




          Thanks. It's what I wanted to know
          – Roman Roman
          Nov 12 at 15:07








        1




        1




        Thanks. It's what I wanted to know
        – Roman Roman
        Nov 12 at 15:07




        Thanks. It's what I wanted to know
        – Roman Roman
        Nov 12 at 15:07













        1














        componentDidUpdate is invoked when the render function within a component is called. This can happen when state or props changes. It can also happen when forceUpdate is called.



        Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated. In your case, probably, though the render function was triggered, there was no change in the virtual DOM and hence there was no DOM update.






        share|improve this answer


























          1














          componentDidUpdate is invoked when the render function within a component is called. This can happen when state or props changes. It can also happen when forceUpdate is called.



          Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated. In your case, probably, though the render function was triggered, there was no change in the virtual DOM and hence there was no DOM update.






          share|improve this answer
























            1












            1








            1






            componentDidUpdate is invoked when the render function within a component is called. This can happen when state or props changes. It can also happen when forceUpdate is called.



            Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated. In your case, probably, though the render function was triggered, there was no change in the virtual DOM and hence there was no DOM update.






            share|improve this answer












            componentDidUpdate is invoked when the render function within a component is called. This can happen when state or props changes. It can also happen when forceUpdate is called.



            Sometimes, a component update may not trigger a DOM update. This is because React creates a virtual DOM after the update and checks with the virtual DOM before update. And only if there is a difference, the DOM is updated. In your case, probably, though the render function was triggered, there was no change in the virtual DOM and hence there was no DOM update.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 12 at 15:06









            vijayst

            5,97893775




            5,97893775























                1














                componentDidUpdate will run if there are any STATE, or PROP changes made to the component after the initial render, whether or not the change is effecting the DOM.






                share|improve this answer


























                  1














                  componentDidUpdate will run if there are any STATE, or PROP changes made to the component after the initial render, whether or not the change is effecting the DOM.






                  share|improve this answer
























                    1












                    1








                    1






                    componentDidUpdate will run if there are any STATE, or PROP changes made to the component after the initial render, whether or not the change is effecting the DOM.






                    share|improve this answer












                    componentDidUpdate will run if there are any STATE, or PROP changes made to the component after the initial render, whether or not the change is effecting the DOM.







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 12 at 15:09









                    Dmitriy

                    477112




                    477112























                        1














                        The arguments of the componentDidUpdate should satisfy your query. The prevProps, prevState, snapshot are those data that gets updated from some other hooks. And at that time, you'll need componentDidUpdate to handle the update.



                        This picture should give you detailed information on updates:



                        enter image description here



                        So, you can see componentDidUpdate() is invoked immediately after updating occurs.






                        share|improve this answer




























                          1














                          The arguments of the componentDidUpdate should satisfy your query. The prevProps, prevState, snapshot are those data that gets updated from some other hooks. And at that time, you'll need componentDidUpdate to handle the update.



                          This picture should give you detailed information on updates:



                          enter image description here



                          So, you can see componentDidUpdate() is invoked immediately after updating occurs.






                          share|improve this answer


























                            1












                            1








                            1






                            The arguments of the componentDidUpdate should satisfy your query. The prevProps, prevState, snapshot are those data that gets updated from some other hooks. And at that time, you'll need componentDidUpdate to handle the update.



                            This picture should give you detailed information on updates:



                            enter image description here



                            So, you can see componentDidUpdate() is invoked immediately after updating occurs.






                            share|improve this answer














                            The arguments of the componentDidUpdate should satisfy your query. The prevProps, prevState, snapshot are those data that gets updated from some other hooks. And at that time, you'll need componentDidUpdate to handle the update.



                            This picture should give you detailed information on updates:



                            enter image description here



                            So, you can see componentDidUpdate() is invoked immediately after updating occurs.







                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            edited Nov 12 at 15:16

























                            answered Nov 12 at 15:06









                            Bhojendra Rauniyar

                            50.6k1979124




                            50.6k1979124






























                                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.





                                Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                Please pay close attention to the following guidance:


                                • 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%2f53264873%2fwhat-is-updating-in-react%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

                                Bressuire

                                Image
                                Subprefecture and commune in Nouvelle-Aquitaine, France Bressuire Subprefecture and commune Chateau de Bressuire and the Eglise Notre-Dame Coat of arms Location of Bressuire Bressuire Show map of France Bressuire Show map of Nouvelle-Aquitaine Coordinates: 46°50′27″N 0°29′14″W  /  46.8408°N 0.4872°W  / 46.8408; -0.4872 Coordinates: 46°50′27″N 0°29′14″W  /  46.8408°N 0.4872°W  / 46.8408; -0.4872 Country France Region Nouvelle-Aquitaine Department Deux-Sèvres Arrondissement Bressuire Canton Bressuire Government  • Mayor .mw-parser-output .nobold{font-weight:normal} (2014–20) Jean Michel Bernier Area 1 180.59 km 2 (69.73 sq mi) Population (2014) 2 19,300  • Density 110/km 2 (280/sq mi) Time zone UTC+01:00 (CET)  • Summer (DST) UTC+02:00 (CEST) INSEE/Postal code 79049 /79300 Elevation 98–236 m (322–774 ft) (avg. 173 m or 568 ft) 1 French Land Register data, which exclude...
                                Read more

                                Vorschmack

                                Image
                                Vorschmack Ukrainian Jewish-style vorschmack served on rye bread Course Hors d'oeuvre Region or state Eastern Europe Associated national cuisine Ashkenazi Jewish, Finnish, German, Ukrainian, Polish, Russian Main ingredients Ground meat and/or fish Cookbook: Vorschmack   Media: Vorschmack Vorschmack or forshmak (Yiddish: פֿאָרשמאַק ‎, from archaic German Vorschmack , "foretaste" [1] or "appetizer" [2] ) is an originally East European dish made of salty minced fish or meat. Different variants of this dish are especially common in Ashkenazi Jewish and Finnish cuisine. Some varieties are also known in Russian and Polish cuisine. Contents 1 In Jewish cuisine 2 In Russian cuisine 3 In Polish cuisine 4 In Finnish cuisine 5 See also 6 References In Jewish cuisine According to Gil Marks, the German name points to the possible Germanic origin of this dish. [1] William Pokhlyobkin descr...
                                Read more

                                Quarantine

                                Image
                                For other uses, see Quarantine (disambiguation). Signal flag "Lima" called the "Yellow Jack" which when flown in harbor means ship is under quarantine. A simple yellow flag (also called the "Yellow Jack") had historically been used to signal quarantine (it stands for Q among signal flags), but now indicates the opposite, as a signal of a ship free of disease that requests boarding and inspection. A quarantine is used to separate and restrict the movement of people; it is 'a restraint upon the activities or communication of persons or the transport of goods designed to prevent the spread of disease or pests', for a certain period of time. [1] This is often used in connection to disease and illness, such as those who may possibly have been exposed to a communicable disease. [2] The term is often erroneously used to mean medical isolation, which is "to separate ill persons who have a communicable disease from those who are healthy...
                                Read more