Advanced React
Now that we’ve seen the basics and built a couple larger apps, let’s go a bit deeper into how things work, and cover some new areas of this framework to step up your React game.
The Hooks
The best place to start is with Kyle’s course on all the hooks.
Exercise: Browse the entire course as time allows.
It’s good to have a solid mental picture of both (1) which hooks are built-in, and (2) how to build your own hooks. Here are the major built-in ones, organized by purpose:
| Type | Built-in Hooks |
|---|---|
| State Management | useState, useReducer |
| Effect Management | useEffect |
| Context | useContext |
| Routing | useHistory, useLocation, useParams, useRouteMatch |
| Styles | useStyle, useTheme |
| Animation | useSpring, useTransition |
Here are a few others that are lesser-known:
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
See the reference documentation for these hooks. If you are looking for more, check out the Rooks project which has dozens of hooks to add to your apps. There’s even a few interesting hooks in this article.
State Management
TODO
Understanding Effects
TODO
Context
TODO
Routing
TODO
Styles
TODO
Animation
TODO
Building Your Own Hooks
TODO
Server-Side Rendering
TODO
Recall Practice
Here are some questions useful for your spaced repetition learning. Many of the answers are not found on this page. Some will have popped up in lecture. Others will require you to do your own research.
- What hooks are used to manage state in React? useState and useReducer
Summary
We’ve covered:
- State management
- Effect management
- Context
- Routing
- Styling
- Animation