What renders a function in React

Question

I have following component:

const RenderJobsTable = props => {some render stuff in here};

And I call that function in another functions render:

<Collapse isOpen={toggleJobTable} id="collapseExample">
  <CardBody>
    <RenderJobsTable
      crawl={props.crawl}
      jobs={jobs}
    ></RenderJobsTable>
  </CardBody>
</Collapse>

I noticed that every time I collapse the outer element and toggle it so it gets visible again, the function is called again. What exactly triggers the function to be called in React? Is it when the element is visible? Is if if one of it's parameters changes? Or if parent functions gets changed? If I just toggle the element and I have some call's to a rest service I don't want that to happen all the time. So I need to understand what triggers the call.

If I understand you correctly, every time you toggle, the element is been removed from the DOM so when you toggle it on, React should calculate again what should be rendered (running `render()` again) — Mosh Feu, Jan 27 '20 at 16:42

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Basically, Reacts render method gets triggered almost every time something related to the state of the component changes. From How does React decide when to re render a component?:

A re-render can only be triggered if a component’s state has changed. The state can change from a props change, or from a direct setState change. The component gets the updated state and React decides if it should re-render the component. Unfortunately, by default React is incredibly simplistic and basically re-renders everything all the time.

Component changed? Re-render. Parent changed? Re-render. Section of props that doesn't actually impact the view changed? Re-render.

You can also refer to a similar question's answer.

Related to when to make API calls, I strongly suggest that you read about React component Lifecycle (for example here or here).

TLDR, place your API calls in componentDidMount().

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 27 '20 at 16:42

dglozano

6,369
2
19
38

Thanks, appreciated. I will follow-up on the API calls part. I have just started on REACT but as far as I understand the recommened way is to use arrow functions. So componentDidMount is replaced by useState in my scenario. – Thomas Segato Jan 27 '20 at 18:55
@ThomasSegato you're absolutely right. I've been using React with Redux, so haven't been that deep into React Hooks yet (which appeared last year if I am correct). I think that in the past, it was recommended to use arrow function component because that meant that the components were stateless. If you wanted to access the state, you needed a class component. Now, since React Hooks appeared, you can have arrow function components that also can access the state, which means that in _most_ (not all) scenarios, you don't need Redux at all. – dglozano Jan 27 '20 at 20:36
One last thing I want to mention is that I think that the hook that can "replace" the `componentDidMount` is `useEffect` with a little tweak (using an empty array as a second param). However, I am not an expert and I haven't learned much about hooks yet, so you might want to read more about that on your own :) – dglozano Jan 27 '20 at 20:37
Will do that. Thanks a lot. First step is to figure out where to do the API calls when you have a sub component in a a sub component in subsub component .. – Thomas Segato Jan 27 '20 at 20:42

What renders a function in React

1 Answers1