kentcdodds / modern-react Goto Github PK

Topics:

• React.lazy
• React.pure
• Fundamental React Suspense
• React Suspense (with react-cache)
• useAPI
• useCallback
• useContext
• useEffect
• useLayoutEffect?
• useMemo
• useMutationEffect?
• useReducer
• useRef
• useState
• Custom hooks

Examples:

1. Counter:

• useState

2. useCount

• Custom hooks

3. VanillaTilt:

• useRef
• useEffect

4. useVanillaTilt

• Custom hooks

5. StopWatch

• useRef (useAPI?)
• useState
• useEffect

6. StopWatch:

• useReducer (a la redux)

7. StopWatch:

• useReducer (a la setState)

8. useStopWatch:

• Custom hooks

9. FetchPokemon:

• Fundamental Suspense

10. FetchPokemon

• Suspense with react-cache

11. FetchPokemon

• useContext

12. FetchPokemon

• React.lazy

13. Contrived Component within another

• React.pure

14. When to not use hooks:

• Outside render phase
• In class component
• Conditionally
• In a loop

Continous to this issue I'm getting error thrown at me saying flushEffects isn't an error.
Without flushEffects() at line 19 my tests pass fine.
I'm not familiar with react-testing-library so I don't know if it's issue with my env or a known issue. Can anyone shed light how I can fix it?

Thanks.

Hey @sophiebits, @acdlite, and @gaearon 👋

I'm planning on using this for teaching material to teach PayPal engineers as well as create workshops and video material about cool stuff coming in React 16.7.0 (after you've announced the features of course). All the material I develop for this initial release will be available for people to learn from for free :)

If you could please review the code in https://github.com/kentcdodds/modern-react/tree/master/src/exercises-final to make sure that I'm not doing something odd/wrong with these features that would be really helpful! I want to make sure that when these features are released there's some material out there for people to learn about them.

If you want to run this stuff, you can run the setup script and then copy over the builds of React that you have with these features.

In tests/03.js, the function flushEffects() is imported on line 2 and called on line 19 which causes an error.

Removing flushEffects from the import and from line 19 fixes the error and lets the test pass.