Improve contextType docs

[gaearon]

See confusion in react/react#13969.
Specific action items:

• Clarify .contextType is available only since 16.6 (and corresponding RN/Expo release)
• Clarify you may not be seeing it due to circular deps, and best practice is to declare it in a separate file
• People sometimes get confused thinking that createContext value is the one you need to "update", we need to explain it's driven by state
• Need more coherent doc structure

[schalkneethling]

@gaearon,

UPDATE: Turns out the problem I ran into has nothing to do with what was described below. The problem was the file extension. When I changed it to SearchStore.tsx from SearchStore.ts, the TypeScript error went away. In retrospect, it makes perfect sense as the Provider function returns a JSX Element.

The remaining question then is, even though TypeScript no longer raises an error, can one still get into a circular dependency issue here? i.e., is it still best practice to have a Context.ts file that contains:

import { createContext } from 'react';

export const SearchContext = createContext(null);
// ... other context object definitions

RE:

Clarify that createContext calls should be in separate files, and not in same file as Provider/parent - #1481

React and ReactDOM: 17.0.2

It seems like the above is the same cause for the following error from TypeScript.

// SearchStore.ts
import { createContext } from 'react';

// I noticed in the docs that this can no longer be `createContext()`
// https://react.dev/reference/react/createContext#parameters
export const SearchContext = createContext(null);

export const SearchProvider = () => {
  const store = useLocalObservable(() => ({
    errorMessage: '',
    page: PaginationConstants.DEFAULT_PAGE,
    pageSize: PaginationConstants.DEFAULT_PAGE_SIZE,
    results: [],
    resultCount: 0,
  }));

  return <SearchContext.Provider /> // Cannot find namespace 'SearchContext'. ts(2503)
};

I first thought it might be related to the use of the arrow function, but I get the same with `export function SearchProvider() { ... }```.

With all of that said 😃 the single file "component" here works with everything in the same file:
https://codesandbox.io/s/m31mv7wox9 - From: react/react#13969 (comment)

Also, I am happy to help update the docs if this has not been addressed elsewhere, although I will need some guidance in doing so.