Reading: Hooks API
Review, Research, and Discussion
- Why do we not need more .html pages in a multi-page React app?
- Because React is a Single Page Application meaning that the whole app renders within index.html even when it appears that you have changed pages.
- If we wanted a component to show up on every page, where would we put it and why?
- It would go inside the
<BrowserRouter />, outside<Route/>. BrowserRouter is used for doing client side routing with URL segments.
- It would go inside the
- What does props.children contain?
- It contains all the child components defined with a component.
Vocabulary
- props.children
- The children, in React, refer to the generic box whose contents are unknown until they’re passed from the parent component.
- It simply means that the component will display whatever is included in between the opening and closing tags while invoking the component. The component would usually be invoked from App component.
-
For further information clicks =>here
- composition
- React Composition is a development pattern based on React’s original component model where we build components from other components using explicit defined props or the implicit children prop.
-
For further information clicks =>here
- Hash Routing
- It uses URL hash, it puts no limitations on supported browsers or web server.
- Link Routing
- A string representing the path to link to
Preparation
- Why Hooks?
-
We know that components and top-down data flow help us organize a large UI into small, independent, reusable pieces. However, we often can’t break complex components down any further because the logic is stateful and can’t be extracted to a function or another component. Sometimes that’s what people mean when they say React doesn’t let them “separate concerns.”
-
These cases are very common and include animations, form handling, connecting to external data sources, and many other things we want to do from our components. When we try to solve these use cases with components alone, we usually end up with:
- Huge components that are hard to refactor and test.
- Duplicated logic between different components and lifecycle methods.
- Complex patterns like render props and higher-order components.
-
- Do Hooks Make React Bloated?
- If the React community embraces the Hooks proposal, it will reduce the number of concepts you need to juggle when writing React applications. Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components, and render props.
- In terms of the implementation size, the Hooks support increases React only by ~1.5kB (min+gzip). While this isn’t much, it’s also likely that adopting Hooks could reduce your bundle size because code using Hooks tends to minify better than equivalent code using classes.
- What Are Hooks, Exactly?
- Today, there are a lot of ways to reuse logic in React apps. We can write simple functions and call them to calculate something. We can also write components (which themselves could be functions or classes). Components are more powerful, but they have to render some UI. This makes them inconvenient for sharing non-visual logic. This is how we end up with complex patterns like render props and higher-order components. Wouldn’t React be simpler if there was just one common way to reuse code instead of so many?
- Functions seem to be a perfect mechanism for code reuse. Moving logic between functions takes the least amount of effort. However, functions can’t have local React state inside them. You can’t extract behavior like “watch window size and update the state” or “animate a value over time” from a class component without restructuring your code or introducing an abstraction like Observables. Both approaches hurt the simplicity that we like about React.
- Hooks solve exactly that problem. Hooks let you use React features (like state) from a function — by doing a single function call. React provides a few built-in Hooks exposing the “building blocks” of React: state, lifecycle, and context.
- Since Hooks are regular JavaScript functions, you can combine built-in Hooks provided by React into your own “custom Hooks”.
- Basic Hooks
- useState
- useEffect
- useContext
- Additional Hooks
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
-
useDebugValue
-
For further information clicks =>here
| Read | Title | ToGo |
|---|---|---|
| Read: 01 | Pre-Work - Code 401: Advanced Javascript Development |  |
| Read: 02 | Readings: Express | |
| Read: 03 | Readings: Express REST API | |
| Read: 04 | Readings: Data Modeling | |
| Read: 06 | Readings: Authentication | |
| Read: 07 | Reading: Bearer Authorization | |
| Read: 08 | Reading: Access Control (ACL) | |
| Read: 09 | Reading: OAuth 2 | |
| Read: 11 | Readings: Event Driven Applications | |
| Read: 12 | Readings: Socket.io | |
| Read: 13 | Readings: Message Queues | |
| Read: 14 | Readings: Event Driven Architecture | |
| Read: 16 | Readings: AWS: Cloud Servers | |
| Read: 17 | Readings: AWS: S3 and Lambda | |
| Read: 18 | Readings: AWS: API, Dynamo and Lambda | |
| Read: 18 | Readings: AWS: Events | |
| Read: 26 | Reading: Component Based UI | |
| Read: 27 | Reading: Props and State | |
| Read: 28 | Readings: Component Composition | |
| Read: 29 | Readings: Routing | |
| Read: 31 | Reading: Hooks API | |
| Read: 32 | Reading: Custom Hooks | |
| Read: 33 | Reading: Context API | |
| Read: 34 | Reading: <Login /> and <Auth /> |
|
| Read: 36 | Reading: Application State with Redux | |
| Read: 37 | Readings: Redux - Combined Reducers | |
| Read: 38 | Readings: Redux - Asynchronous Actions | |
| Read: 39 | Readings: Redux - Additional Topics | |