Measuring how many times your components are rendering in React Native functional components

user_5696181 0
Viewed 1102

An easy way to see how many times components render in class components is the following:

render() {
  console.log('component')
  return <Component />
}

Is the equivalent in functional components useEffect?

useEffect(() => {
   console.log('component');
});

When I call this I notice that 'component' is being printed over and over again. Does this mean that my component is being re-rendered over and over again unnecessarily?

react-functional-component use-effect react-native reactjs rendering
1 Answers

Passing no 2nd argument causes the useEffect to run every render. Then, when it runs, it fetches the data and updates the state. Then, once the state is updated, the component re-renders, which triggers the useEffect again. If you want to render once like componentDidMount pass '[]' as an argument or your state on which change you wanted to render.

user_77139200
Related