5

I have a react component let's say: app.js ( parent component ) that has a child component which renders a react bootstrap modal component. the parent component fetch data from redux using react hook like that:

  useEffect(() => { props.dispatch(actions.loadAll());},[]);

and then data are being passed to show in my modal component. I am handling the modal visibility with "show" and "onShow" state. Is there anyways, I can avoid loading the data in my parent component and loads only after the modal component loads and display data there? any suggestions would be appreciated.

ninja
  • 167
  • 2
  • 12
  • 1
    `useEffect` will only execute after initial render is done. So the modal would be rendered by the time `useEffect` runs. – Jagrati Apr 24 '20 at 14:25
  • Is it possible to tell me more about this. I can see from the browser network tab that the data loads even though modal is not loaded – ninja Apr 24 '20 at 14:33

2 Answers2

4

You can use useEffect hook that depends on your state show.

useEffect(() => { props.dispatch(actions.loadAll());},[show]);

Using this chunk of code when the show state changes, the useEffect runs. So when your modal opens, your data is loaded.

S. Hesam
  • 5,266
  • 3
  • 37
  • 59
  • you meant that I should declare "useEffect" to the modal component (child) or the app.js ( parent component) – ninja Apr 24 '20 at 14:39
  • Any component that owns your state. – S. Hesam Apr 24 '20 at 14:44
  • Okay,will give it a try – ninja Apr 24 '20 at 14:46
  • I have used that but and saw the data loads and update the store only when the modal renders but I do have a problems now accessing the state from the reducers. seems like,I can't access the state immediately... – ninja Apr 27 '20 at 10:08
  • If you would like to access data immediately, you should get data in useEffect without any dependency. When using useEffect with dependency, it doesn't call until its dependency will change. If my answer can help you, please accept it. – S. Hesam Apr 27 '20 at 15:35
  • Is it possible to give a sort example of it? what do you mean by without dependency. In my case, my parent component need to access the data from redux store using mapStateToProps – ninja Apr 27 '20 at 16:25
  • It will load everytime you open the modal and close the modal. So you will be loading the data too many times. As such its not a very efficient solution. – RollingInTheDeep Oct 20 '21 at 17:57
3

Like s.hesam said

use condition to load the data only if the modal open.

I add the condition if the modal open the first time - fisrtTimeLoad

fisrtTimeLoad - can be the data in the state that exist and you put it as another condition.

useEffect(() => {
    if (show && fisrtTimeLoad) props.dispatch(actions.loadAll());
  }, [show, fisrtTimeLoad]);
Omer
  • 3,232
  • 1
  • 19
  • 19
  • This is a much better answer than the accepted answer. It prevents multiple data loads. You might want to correct the spelling mistake though (first) – RollingInTheDeep Oct 20 '21 at 17:58