finds.dev← search

// the find

ryanflorence/react-conf-2018

★ 643 · JavaScript · updated Feb 2019

Ryan Florence's demo code from his React Conf 2018 talk on hooks, split into a Create React App carousel and a media-loading example. It is a teaching artifact rather than a library, and it is only useful to people who already know React and want to see a class-based component refactored to hooks.

- Each app keeps App.start.js and App.final.js side by side, so the before and after of the refactor is visible in the same folder. Most hook write-ups only show the finished state.

- useProgress.js and useMedia.js are short custom hooks, small enough to read in a few minutes. That is the case for extracting them: the browser-facing state logic lives in one place.

- The media example uses react-cache with Suspense to handle loading, so the component doesn't carry a loading flag. The pattern was experimental at the time, so read it as a snapshot of where the API was headed.

- Both apps vendor their own copies of react, react-dom, scheduler and react-cache under vendor/ instead of depending on npm packages. The code runs against 2018 pre-release builds, so don't copy the setup into a real project.

- Nothing is maintained. The last push was February 2019, the CRA scaffold is old, and the live demo at 90.now.sh is the kind of link that stops working. Expect to fight the toolchain before the app runs on a current Node.

- The repo is mostly vendored code and duplicated config, with the same vendor and config directories in both apps. It also has a committed vim swap file (.App.Media.start.js.swo) in each app.

- A Jest setup exists, but no test files appear in the listing, so nothing checks the hooks' behaviour. The examples are demonstrations, not verified code.

View on GitHub →

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →