title: Conditionally execute useContext in React
body: <p>I am looking to conditionally call useContext. This is my original code, which runs correctly, but fails tslint.</p>
  <p>Component that calls <em><strong>useResourceScope</strong></em> - say <em><strong>Component1</strong></em></p>
  <pre><code>import { useEffect } from 'react';
  
  export function useSubscribeListItemStore(
    inputResources?: ResourceScope
  ) {
    const resources = inputResources || useResourceScope();
    const listItemStore = resources.consume(listItemStoreKey);
    
    useEffect(function subscribeListItemStore() {
      // do some logic
    }, []);
  }
  </code></pre>
  <p>Component that defines <em><strong>useResourceScope</strong></em> - say <em><strong>Component2</strong></em></p>
  <pre><code>import { createContext } from 'preact';
  import { useContext } from 'preact/hooks';
  
  export const ResourceScopeContext = createContext&lt;ResourceScope | undefined&gt;(undefined);
  
  export function useResourceScope(): ResourceScope {
    const resources = useContext(ResourceScopeContext);
    if (!resources) {
      throw new Error(
        'error message'
      );
    }
    return resources;
  }
  </code></pre>
  <p>This gives me a tslint error: <strong>(react-hooks-nesting) A hook cannot be used in a conditional expression</strong></p>
  <p>This is my attempt at solving this, but does not work. It does not run correctly and fails at the <em>useContext</em> line in <em>Component2</em> My thought was that since <em>useContext</em> <strong>must</strong> be called to fix the tslint errors, I decided to conditionally call the useContext with different created contexts. If the variable <code>inputResources</code> is passed in, it calls <code>useContext</code> with a placeholder context called <code>PlaceHolderContext</code>, which it ignores and returns <code>inputResources</code>. If not, it does <code>useContext</code> using the intended <code>ResourceScopeContext</code> value.</p>
  <p>Component that calls <em><strong>useResourceScope</strong></em> - say <em><strong>Component1</strong></em></p>
  <pre><code>import { useEffect } from 'react';
  
  export function useSubscribeListItemStore(
    inputResources?: ResourceScope
  ) {
    const resources = useResourceScope(inputResources);
    const listItemStore = resources.consume(listItemStoreKey);
    
    useEffect(function subscribeListItemStore() {
      // do some logic
    }, []);
  }
  </code></pre>
  <p>Component that defines <em><strong>useResourceScope</strong></em> - say <em><strong>Component2</strong></em></p>
  <pre><code>import { createContext } from 'preact';
  import { useContext } from 'preact/hooks';
  
  export const ResourceScopeContext = createContext&lt;ResourceScope | undefined&gt;(undefined);
  
  export function useResourceScope(inputResources?: ResourceScope): ResourceScope {
    const PlaceHolderContext = createContext({ foo: 'bar' });
    const createdContext = inputResources ? PlaceHolderContext : ResourceScopeContext;
  
    const resources = useContext(createdContext as any);
  
    if (inputResources) {
      return inputResources;
    }
  
    if (!resources) {
      throw new Error(
        'error message'
      );
    }
    return resources as any;
  }
  </code></pre>
  <p>Could you suggest how I can resolve tslint error here without breaking it?</p>