/react-moving-forward-example

An example of App of the Usage of React Hooks APIs together with Suspense.

Primary LanguageTypeScript

React Moving Forward

This repo is an example of how to use React Hooks and Suspense together. It approaches examples of almost all hook APIs and also displays some other possible integration between them. It also shows how we can leverage TypeScript with React.

Watch the presentation

Get started

  1. git clone <repo_url>
  2. yarn
  3. Override types - look down.
  4. yarn start

Override types:

  1. Create missing createRoot type in @types/react-dom In react-moving-forward-example/node_modules/@types/react-dom/index after createPortal add: export function createRoot(children: any): any;

  2. Uncomment Suspense's maxDuration in @types/react In react-moving-forward-example/node_modules/@types/react/index search for maxDuration inside the Suspense type and uncomment maxDuration

Note: yarn is required, since we are using package.json's resolution feature to override the scheduler's version, npm doesn't provide that.

Note 2: The app fetches news articles from google news api, I've kept my google api key in the repo to facilitate the usage, however, there is a limit of 1000 requests per day, if you run out jsut create a new account and change the api key below. google news api

1) What are React Hooks?

Hooks are a new feature proposal that lets you use state and other React features without writing a class. They’re currently in React v16.7.0-alpha and being discussed in an open RFC.

  • useState
  • useEffect
  • useContext
  • useReducer
  • useMemo
  • useRef
  • useImperativeMethods
  • useMutationEffect
  • useLayoutEffect

2) New patterns that will emerge with Hooks & Suspense.

Request data inside Function Components

code

const useGoogleNewsData = () => {
  const [googleNews, setGoogleNews] = useState([]);
  useEffect(() => {
    fetchGoogleNews(setGoogleNews);
  }, []);


  return googleNews;
};

Minimalistic State shared with Context: Note that it's recommended to separate the Provider into two.

code

export const UserContextProvider: React.SFC<{}> = ({ children }) => {
  const [state, dispatch] = useState(initialState);
  const value = {
    state,
    dispatch,
  };


  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
};

Fetcher: A component that fetches and component resolution incorporated with Suspense.

code

    <View>
      <Text type='body'>Fetcher example</Text>
      <Fetcher
        url={googleNewsUrl}
        mapData={(dt) => dt.articles}
        onRender={({ data }: any) => <NewsList news={data} />}
        onFallback={<p>Loading...</p>}
        onFailure={<p>Failure</p>}
        maxDuration={1000}
        saveData={(dt) => null}
      />
    </View>

3) Attention, as of 15 of November, 2018 HOOKs are still in alpha.