title: Why create contexts instead of just exporting objects?
body: <p>So I want to avoid deep nesting of props and I was starting to use React context to do this, but then it occurred to me "why don't I just export objects instead?"</p>
  
  <p>For example, instead of writing:</p>
  
  <pre><code>const handleClick: = event =&gt; {
    event.preventDefault();
    doSomething();
  };
  const calcPrice = (quantity) = {
    return quantity * 100
  };
  export const ComponentContext = createContext({});
  
  export const ParentComponent = () =&gt; {
    return (
      &lt;ComponentContext.Provider value={{ handleClick, calcPrice }}&gt;
        &lt;ChildComponent quantity={12} /&gt;
      &lt;/ComponentContext.Provider&gt;
  
  }
  </code></pre>
  
  <p>And import it as:</p>
  
  <pre><code>export const ChildComponent = (quantity) = {
    const { handleClick, calcPrice } = useContext(ComponentContext);
    const totalPrice = calcPrice(quantity);
    return &lt;button onClick={handleClick}&gt;Total is ${totalPrice}&lt;/button&gt;
  }
  </code></pre>
  
  <p>I could instead simply write it as:</p>
  
  <pre><code>const handleClick: = event =&gt; {
    event.preventDefault();
    doSomething();
  };
  const calcPrice = (quantity) = {
    return quantity * 100
  };
  export const componentProps = { handleClick, calcPrice };
  
  export const ParentComponent = () =&gt; {
    return &lt;ChildComponent quantity={12} /&gt;
  }
  </code></pre>
  
  <p>And import it as:</p>
  
  <pre><code>const { handleSignUpClick, calcPrice } = componentProps;
  export const ChildComponent = (quantity) = {
    const totalPrice = calcPrice(quantity);
    return &lt;button onClick={handleClick}&gt;Total is ${totalPrice}&lt;/button&gt;
  }
  </code></pre>
  
  <p>What's the advantage of doing it with context instead of with functions?</p>