Set hook's state once

Question

I don't understand why when I run:

  interface Xxx {
    str: string
  }

  const [xxx, setXxx] = useState<Xxx>();

  function getData() {
    setXxx({
      str: "aaa"
    });
  }

  getData()

then the hook is being set all the time and forever. How to run getData once?

Does this answer your question? [How to use componentWillMount() in React Hooks?](https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks) — CertainPerformance, Oct 30 '20 at 15:00
Because every time this component renders you set xxx and every time you set xxx the component re-renders — George, Oct 30 '20 at 15:00

score 3 · Answer 1 · answered Oct 30 '20 at 15:09

To execute your method only once on the component init, you can use the hook useEffect :

useEffect(() => {
  getData()
}, []);

This is similar to react lifecycle method componentDidMount.

Some documentation : https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

Set hook's state once

1 Answers1