What’s the difference between useState and useEffect?











up vote
0
down vote

favorite












I have seen these two new concepts introduced in react v16.



As per my understanding:




useState is similar like setState with hooks and useEffect works similarly like life cycle methods.




Is my understanding correct? If not, what’s the exact difference between useState and useEffect?










share|improve this question




























    up vote
    0
    down vote

    favorite












    I have seen these two new concepts introduced in react v16.



    As per my understanding:




    useState is similar like setState with hooks and useEffect works similarly like life cycle methods.




    Is my understanding correct? If not, what’s the exact difference between useState and useEffect?










    share|improve this question


























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I have seen these two new concepts introduced in react v16.



      As per my understanding:




      useState is similar like setState with hooks and useEffect works similarly like life cycle methods.




      Is my understanding correct? If not, what’s the exact difference between useState and useEffect?










      share|improve this question















      I have seen these two new concepts introduced in react v16.



      As per my understanding:




      useState is similar like setState with hooks and useEffect works similarly like life cycle methods.




      Is my understanding correct? If not, what’s the exact difference between useState and useEffect?







      javascript reactjs react-native react-hooks






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 10 at 21:14









      Yangshun Tay

      7,98153464




      7,98153464










      asked Nov 9 at 2:51









      Hemadri Dasari

      6,63911037




      6,63911037
























          2 Answers
          2






          active

          oldest

          votes

















          up vote
          2
          down vote



          accepted










          To put it simply, both useState and useEffect enhance functional components to make them do things that classes can but functional components (without hooks) cannot:





          • useState allows functional components to have state, like this.state in class components.


          • useEffect allows functional components to have lifecycle methods (such as componentDidMount, componentDidUpdate and componentWillUnmount) in one single API.




          Refer to the examples below for further illustration:



          useState






          class CounterClass extends React.Component {
          constructor(props) {
          super(props);
          this.state = { count: 1 };
          }

          render() {
          return <div>
          <p>Count: {this.state.count}</p>
          <button onClick={() => this.setState({
          count: this.state.count + 1
          })}>Increase</button>
          </div>;
          }
          }

          function CounterFunction() {
          const [count, setCount] = React.useState(1);
          return (
          <div>
          <p>Count: {count}</p>
          <button onClick={() =>
          setCount(count + 1)}
          >Increase</button>
          </div>
          );
          }

          ReactDOM.render(
          <div>
          <CounterClass />
          <CounterFunction />
          </div>
          , document.querySelector('#app'));

          <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
          <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

          <div id="app"></div>





          useEffect






          class LifecycleClass extends React.Component {
          componentDidMount() {
          console.log('Mounted');
          }

          componentWillUnmount() {
          console.log('Will unmount');
          }

          render() {
          return <div>Lifecycle Class</div>;
          }
          }

          function LifecycleFunction() {
          React.useEffect(() => {
          console.log('Mounted');
          return () => {
          console.log('Will unmount');
          };
          }, ); // Empty array means to only run once on mount.
          return (
          <div>Lifecycle Function</div>
          );
          }

          ReactDOM.render(
          <div>
          <LifecycleClass />
          <LifecycleFunction />
          </div>
          , document.querySelector('#app'));

          <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
          <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

          <div id="app"></div>





          Read more about useState and useEffect on the official React docs.






          share|improve this answer






























            up vote
            5
            down vote













            For useState()



            First, we have the functional component which is not supported state, in other words, a functional component is a stateless component.



            Now, with Hooks, we have the functional component but stateful. It is achieved by using useState.





            For useEffect()



            First, with stateless functional component, we don't have component lifecycle hooks. In other words, whenever you want to use component lifecycle hooks, you should consider using class component.



            Now, we are able to use component lifecycle hooks without using class component. It is achieved by using useEffect. In other words, now whenever we want to use component lifecycle hooks, we already have two options either using class component or using Hooks with useEffect.





            UPDATE




            what’s the exact difference between useState and useEffect?




            In simple words, useState allows our functional components which used to be stateless become stateful. And useEffect allows our functional components leverage the component lifecycle hooks which are, in the past, only supported for class components.






            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',
              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%2f53219164%2fwhat-s-the-difference-between-usestate-and-useeffect%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes








              up vote
              2
              down vote



              accepted










              To put it simply, both useState and useEffect enhance functional components to make them do things that classes can but functional components (without hooks) cannot:





              • useState allows functional components to have state, like this.state in class components.


              • useEffect allows functional components to have lifecycle methods (such as componentDidMount, componentDidUpdate and componentWillUnmount) in one single API.




              Refer to the examples below for further illustration:



              useState






              class CounterClass extends React.Component {
              constructor(props) {
              super(props);
              this.state = { count: 1 };
              }

              render() {
              return <div>
              <p>Count: {this.state.count}</p>
              <button onClick={() => this.setState({
              count: this.state.count + 1
              })}>Increase</button>
              </div>;
              }
              }

              function CounterFunction() {
              const [count, setCount] = React.useState(1);
              return (
              <div>
              <p>Count: {count}</p>
              <button onClick={() =>
              setCount(count + 1)}
              >Increase</button>
              </div>
              );
              }

              ReactDOM.render(
              <div>
              <CounterClass />
              <CounterFunction />
              </div>
              , document.querySelector('#app'));

              <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
              <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

              <div id="app"></div>





              useEffect






              class LifecycleClass extends React.Component {
              componentDidMount() {
              console.log('Mounted');
              }

              componentWillUnmount() {
              console.log('Will unmount');
              }

              render() {
              return <div>Lifecycle Class</div>;
              }
              }

              function LifecycleFunction() {
              React.useEffect(() => {
              console.log('Mounted');
              return () => {
              console.log('Will unmount');
              };
              }, ); // Empty array means to only run once on mount.
              return (
              <div>Lifecycle Function</div>
              );
              }

              ReactDOM.render(
              <div>
              <LifecycleClass />
              <LifecycleFunction />
              </div>
              , document.querySelector('#app'));

              <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
              <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

              <div id="app"></div>





              Read more about useState and useEffect on the official React docs.






              share|improve this answer



























                up vote
                2
                down vote



                accepted










                To put it simply, both useState and useEffect enhance functional components to make them do things that classes can but functional components (without hooks) cannot:





                • useState allows functional components to have state, like this.state in class components.


                • useEffect allows functional components to have lifecycle methods (such as componentDidMount, componentDidUpdate and componentWillUnmount) in one single API.




                Refer to the examples below for further illustration:



                useState






                class CounterClass extends React.Component {
                constructor(props) {
                super(props);
                this.state = { count: 1 };
                }

                render() {
                return <div>
                <p>Count: {this.state.count}</p>
                <button onClick={() => this.setState({
                count: this.state.count + 1
                })}>Increase</button>
                </div>;
                }
                }

                function CounterFunction() {
                const [count, setCount] = React.useState(1);
                return (
                <div>
                <p>Count: {count}</p>
                <button onClick={() =>
                setCount(count + 1)}
                >Increase</button>
                </div>
                );
                }

                ReactDOM.render(
                <div>
                <CounterClass />
                <CounterFunction />
                </div>
                , document.querySelector('#app'));

                <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
                <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

                <div id="app"></div>





                useEffect






                class LifecycleClass extends React.Component {
                componentDidMount() {
                console.log('Mounted');
                }

                componentWillUnmount() {
                console.log('Will unmount');
                }

                render() {
                return <div>Lifecycle Class</div>;
                }
                }

                function LifecycleFunction() {
                React.useEffect(() => {
                console.log('Mounted');
                return () => {
                console.log('Will unmount');
                };
                }, ); // Empty array means to only run once on mount.
                return (
                <div>Lifecycle Function</div>
                );
                }

                ReactDOM.render(
                <div>
                <LifecycleClass />
                <LifecycleFunction />
                </div>
                , document.querySelector('#app'));

                <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
                <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

                <div id="app"></div>





                Read more about useState and useEffect on the official React docs.






                share|improve this answer

























                  up vote
                  2
                  down vote



                  accepted







                  up vote
                  2
                  down vote



                  accepted






                  To put it simply, both useState and useEffect enhance functional components to make them do things that classes can but functional components (without hooks) cannot:





                  • useState allows functional components to have state, like this.state in class components.


                  • useEffect allows functional components to have lifecycle methods (such as componentDidMount, componentDidUpdate and componentWillUnmount) in one single API.




                  Refer to the examples below for further illustration:



                  useState






                  class CounterClass extends React.Component {
                  constructor(props) {
                  super(props);
                  this.state = { count: 1 };
                  }

                  render() {
                  return <div>
                  <p>Count: {this.state.count}</p>
                  <button onClick={() => this.setState({
                  count: this.state.count + 1
                  })}>Increase</button>
                  </div>;
                  }
                  }

                  function CounterFunction() {
                  const [count, setCount] = React.useState(1);
                  return (
                  <div>
                  <p>Count: {count}</p>
                  <button onClick={() =>
                  setCount(count + 1)}
                  >Increase</button>
                  </div>
                  );
                  }

                  ReactDOM.render(
                  <div>
                  <CounterClass />
                  <CounterFunction />
                  </div>
                  , document.querySelector('#app'));

                  <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
                  <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

                  <div id="app"></div>





                  useEffect






                  class LifecycleClass extends React.Component {
                  componentDidMount() {
                  console.log('Mounted');
                  }

                  componentWillUnmount() {
                  console.log('Will unmount');
                  }

                  render() {
                  return <div>Lifecycle Class</div>;
                  }
                  }

                  function LifecycleFunction() {
                  React.useEffect(() => {
                  console.log('Mounted');
                  return () => {
                  console.log('Will unmount');
                  };
                  }, ); // Empty array means to only run once on mount.
                  return (
                  <div>Lifecycle Function</div>
                  );
                  }

                  ReactDOM.render(
                  <div>
                  <LifecycleClass />
                  <LifecycleFunction />
                  </div>
                  , document.querySelector('#app'));

                  <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
                  <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

                  <div id="app"></div>





                  Read more about useState and useEffect on the official React docs.






                  share|improve this answer














                  To put it simply, both useState and useEffect enhance functional components to make them do things that classes can but functional components (without hooks) cannot:





                  • useState allows functional components to have state, like this.state in class components.


                  • useEffect allows functional components to have lifecycle methods (such as componentDidMount, componentDidUpdate and componentWillUnmount) in one single API.




                  Refer to the examples below for further illustration:



                  useState






                  class CounterClass extends React.Component {
                  constructor(props) {
                  super(props);
                  this.state = { count: 1 };
                  }

                  render() {
                  return <div>
                  <p>Count: {this.state.count}</p>
                  <button onClick={() => this.setState({
                  count: this.state.count + 1
                  })}>Increase</button>
                  </div>;
                  }
                  }

                  function CounterFunction() {
                  const [count, setCount] = React.useState(1);
                  return (
                  <div>
                  <p>Count: {count}</p>
                  <button onClick={() =>
                  setCount(count + 1)}
                  >Increase</button>
                  </div>
                  );
                  }

                  ReactDOM.render(
                  <div>
                  <CounterClass />
                  <CounterFunction />
                  </div>
                  , document.querySelector('#app'));

                  <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
                  <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

                  <div id="app"></div>





                  useEffect






                  class LifecycleClass extends React.Component {
                  componentDidMount() {
                  console.log('Mounted');
                  }

                  componentWillUnmount() {
                  console.log('Will unmount');
                  }

                  render() {
                  return <div>Lifecycle Class</div>;
                  }
                  }

                  function LifecycleFunction() {
                  React.useEffect(() => {
                  console.log('Mounted');
                  return () => {
                  console.log('Will unmount');
                  };
                  }, ); // Empty array means to only run once on mount.
                  return (
                  <div>Lifecycle Function</div>
                  );
                  }

                  ReactDOM.render(
                  <div>
                  <LifecycleClass />
                  <LifecycleFunction />
                  </div>
                  , document.querySelector('#app'));

                  <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
                  <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

                  <div id="app"></div>





                  Read more about useState and useEffect on the official React docs.






                  class CounterClass extends React.Component {
                  constructor(props) {
                  super(props);
                  this.state = { count: 1 };
                  }

                  render() {
                  return <div>
                  <p>Count: {this.state.count}</p>
                  <button onClick={() => this.setState({
                  count: this.state.count + 1
                  })}>Increase</button>
                  </div>;
                  }
                  }

                  function CounterFunction() {
                  const [count, setCount] = React.useState(1);
                  return (
                  <div>
                  <p>Count: {count}</p>
                  <button onClick={() =>
                  setCount(count + 1)}
                  >Increase</button>
                  </div>
                  );
                  }

                  ReactDOM.render(
                  <div>
                  <CounterClass />
                  <CounterFunction />
                  </div>
                  , document.querySelector('#app'));

                  <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
                  <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

                  <div id="app"></div>





                  class CounterClass extends React.Component {
                  constructor(props) {
                  super(props);
                  this.state = { count: 1 };
                  }

                  render() {
                  return <div>
                  <p>Count: {this.state.count}</p>
                  <button onClick={() => this.setState({
                  count: this.state.count + 1
                  })}>Increase</button>
                  </div>;
                  }
                  }

                  function CounterFunction() {
                  const [count, setCount] = React.useState(1);
                  return (
                  <div>
                  <p>Count: {count}</p>
                  <button onClick={() =>
                  setCount(count + 1)}
                  >Increase</button>
                  </div>
                  );
                  }

                  ReactDOM.render(
                  <div>
                  <CounterClass />
                  <CounterFunction />
                  </div>
                  , document.querySelector('#app'));

                  <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
                  <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

                  <div id="app"></div>





                  class LifecycleClass extends React.Component {
                  componentDidMount() {
                  console.log('Mounted');
                  }

                  componentWillUnmount() {
                  console.log('Will unmount');
                  }

                  render() {
                  return <div>Lifecycle Class</div>;
                  }
                  }

                  function LifecycleFunction() {
                  React.useEffect(() => {
                  console.log('Mounted');
                  return () => {
                  console.log('Will unmount');
                  };
                  }, ); // Empty array means to only run once on mount.
                  return (
                  <div>Lifecycle Function</div>
                  );
                  }

                  ReactDOM.render(
                  <div>
                  <LifecycleClass />
                  <LifecycleFunction />
                  </div>
                  , document.querySelector('#app'));

                  <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
                  <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

                  <div id="app"></div>





                  class LifecycleClass extends React.Component {
                  componentDidMount() {
                  console.log('Mounted');
                  }

                  componentWillUnmount() {
                  console.log('Will unmount');
                  }

                  render() {
                  return <div>Lifecycle Class</div>;
                  }
                  }

                  function LifecycleFunction() {
                  React.useEffect(() => {
                  console.log('Mounted');
                  return () => {
                  console.log('Will unmount');
                  };
                  }, ); // Empty array means to only run once on mount.
                  return (
                  <div>Lifecycle Function</div>
                  );
                  }

                  ReactDOM.render(
                  <div>
                  <LifecycleClass />
                  <LifecycleFunction />
                  </div>
                  , document.querySelector('#app'));

                  <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
                  <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

                  <div id="app"></div>






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 10 at 21:30

























                  answered Nov 10 at 21:19









                  Yangshun Tay

                  7,98153464




                  7,98153464
























                      up vote
                      5
                      down vote













                      For useState()



                      First, we have the functional component which is not supported state, in other words, a functional component is a stateless component.



                      Now, with Hooks, we have the functional component but stateful. It is achieved by using useState.





                      For useEffect()



                      First, with stateless functional component, we don't have component lifecycle hooks. In other words, whenever you want to use component lifecycle hooks, you should consider using class component.



                      Now, we are able to use component lifecycle hooks without using class component. It is achieved by using useEffect. In other words, now whenever we want to use component lifecycle hooks, we already have two options either using class component or using Hooks with useEffect.





                      UPDATE




                      what’s the exact difference between useState and useEffect?




                      In simple words, useState allows our functional components which used to be stateless become stateful. And useEffect allows our functional components leverage the component lifecycle hooks which are, in the past, only supported for class components.






                      share|improve this answer



























                        up vote
                        5
                        down vote













                        For useState()



                        First, we have the functional component which is not supported state, in other words, a functional component is a stateless component.



                        Now, with Hooks, we have the functional component but stateful. It is achieved by using useState.





                        For useEffect()



                        First, with stateless functional component, we don't have component lifecycle hooks. In other words, whenever you want to use component lifecycle hooks, you should consider using class component.



                        Now, we are able to use component lifecycle hooks without using class component. It is achieved by using useEffect. In other words, now whenever we want to use component lifecycle hooks, we already have two options either using class component or using Hooks with useEffect.





                        UPDATE




                        what’s the exact difference between useState and useEffect?




                        In simple words, useState allows our functional components which used to be stateless become stateful. And useEffect allows our functional components leverage the component lifecycle hooks which are, in the past, only supported for class components.






                        share|improve this answer

























                          up vote
                          5
                          down vote










                          up vote
                          5
                          down vote









                          For useState()



                          First, we have the functional component which is not supported state, in other words, a functional component is a stateless component.



                          Now, with Hooks, we have the functional component but stateful. It is achieved by using useState.





                          For useEffect()



                          First, with stateless functional component, we don't have component lifecycle hooks. In other words, whenever you want to use component lifecycle hooks, you should consider using class component.



                          Now, we are able to use component lifecycle hooks without using class component. It is achieved by using useEffect. In other words, now whenever we want to use component lifecycle hooks, we already have two options either using class component or using Hooks with useEffect.





                          UPDATE




                          what’s the exact difference between useState and useEffect?




                          In simple words, useState allows our functional components which used to be stateless become stateful. And useEffect allows our functional components leverage the component lifecycle hooks which are, in the past, only supported for class components.






                          share|improve this answer














                          For useState()



                          First, we have the functional component which is not supported state, in other words, a functional component is a stateless component.



                          Now, with Hooks, we have the functional component but stateful. It is achieved by using useState.





                          For useEffect()



                          First, with stateless functional component, we don't have component lifecycle hooks. In other words, whenever you want to use component lifecycle hooks, you should consider using class component.



                          Now, we are able to use component lifecycle hooks without using class component. It is achieved by using useEffect. In other words, now whenever we want to use component lifecycle hooks, we already have two options either using class component or using Hooks with useEffect.





                          UPDATE




                          what’s the exact difference between useState and useEffect?




                          In simple words, useState allows our functional components which used to be stateless become stateful. And useEffect allows our functional components leverage the component lifecycle hooks which are, in the past, only supported for class components.







                          share|improve this answer














                          share|improve this answer



                          share|improve this answer








                          edited Nov 9 at 3:34

























                          answered Nov 9 at 3:12









                          Nguyễn Thanh Tú

                          4,5171827




                          4,5171827






























                               

                              draft saved


                              draft discarded



















































                               


                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53219164%2fwhat-s-the-difference-between-usestate-and-useeffect%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

                              Florida Star v. B. J. F.

                              Danny Elfman

                              Lugert, Oklahoma