title: Sharing data with child components without props
body: <p>I'm sharing data with child components like the code below.</p>
  <pre><code>const App = () =&gt; {
    const [appData, setAppData] = useState({});
  
    const dealId = new URLSearchParams(window.location.search).get('dealId');
  
    useEffect(() =&gt; {
      /* API Call here */,
          (response) =&gt; {
            setAppData(
              Object.entries(response).reduce((previousValue, currentValue) =&gt; {
                return {
                  ...previousValue,
                  [currentValue[0]]: currentValue[1].data(),
                };
              }, {})
            );
          }
        );
      }
    }, [dealId]);
  
    return (
      &lt;React.Fragment&gt;
        &lt;CSSBaseline /&gt;
        &lt;NavAppBar dealId={dealId} user={appData.user} /&gt;
        &lt;Panel&gt;
          &lt;Contact
            contact={appData.contact}
            contactFields={appData.contactFields}
          /&gt;
          &lt;Event event={appData.event} /&gt;
          &lt;Accommodation
            packageItemFields={appData.packageItemFields}
            packageItems={appData.packageItems}
            hotels={appData.hotels}
          /&gt;
          &lt;Course courses={appData.courses} event={appData.event} /&gt;
          &lt;Transportation transportationFields={appData.transportationFields} /&gt;
        &lt;/Panel&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>This feels like not a good pattern since I need to pass the same data more than one time to different components. Is there any way to improve on this? Using context would be more suitable?</p>