Creating a contract instance

Question

Is it generally better to define a contract instance once, then pass it through your components like...

    class Parent extends React.Component{
      constructor(props){
        super(props);
        this.state={
          contract = new contract(contract.abi, contract.address)
          }
        }

      render() {
        return{
          <div>
            <Child contract={this.state.contract}/>
          </div>
        }
      }
    }

    class child extends React.Component{
      constructor(props){
        super(props);
      }

      async function = () => {
        //use this.props.library in here to call contract methods
      }

      render() {
        return{
          <div>
            <other stuff />
          </div>
        }
      }
    }

Or is it alright to define a new contract instance every time you need to use it?

    class Parent extends React.Component{
      constructor(props){
        super(props);
      }

      render() {
        return{
          <div>
            <Child />
          </div>
        }
      }
    }

    class child extends React.Component{
      constructor(props){
        super(props);
      }

      async function = () => {
        //use this.state.library in here to call contract methods
      }

      render() {
        return{
          <div>
            <other stuff />
          </div>
        }
      }
    }

Answer 1

It's okay to define a contract instance every time you need it, as the ABI and deployed address haven't changed, and your web3 library is only creating a Javascript object off-chain, not checking on-chain or doing anything slow over the network.

I think the efficiency difference is negligible, but if you can create your contract instance once and pass it around, it would also save you the trouble of passing your ABI and deployed address everywhere in the child components.