Code 401: Class 31 - Hooks API
Questions
-
Why do we need more .html pages in a multi-page React app? “Single page websites cannot always represent complete information” - Techomoro, Syamlal CM
-
If we wanted a component to show up on every page, where would we put it and why? Create a layout component
-
What does props.children contain? Whatever you include in between the opening and closing tags
Vocabulary
- Composition Combining multiple components to achieve a particular goal
- Children Allows you to pass components as data to other components
- Hash Routing “A URL that has a unique application endpoint
/app/ controlled by one single back-end action and multiple hashtags managed by JavaScript that define the SPA routes” - ITNEXT.io, Ideneal
- Link Routing “The primary way to allow users to navigate around your application” - React Router Docs
- Hooks let you always use functions rather than a mix of functions classes, higher-order components, and render props
- Adding hooks does not introduce any breaking changes
- Hooks don’t share state they share stateful logic
- Hooks are a vision of the future of React at FB
- `import React, { useState } from ‘react’;
- Calling useState declares a state variable that does not disappear after the function exits
- useState returns the current state and a function that updates it
- Hooks don’t work inside classes, but they can replace the need for classes
- Hooks are functions that let you hook into React state and lifecycle features
useEffect runs your effect function after flushing changes to the DOM, runs after every render- Rules of Hooks
- Only call hooks at the top level, don’t call hooks inside loops, conditions, or nested functions
- Only call hooks from React function components
- “Bailing out of a state update” if you update a state hook to the same value as the current state, will not render children or firing effects
- Effect Hook allows you to perform side effects in function components
- Can pass a second argument to the useEffect() as an array that will prevent unnecessary re-renders
Return to reading-notes Deployed Site
Return to reading-notes Mark Down