Reading: Custom Hooks

Review, Research, and Discussion

• What does a component’s lifecycle refer to?
  • Lifecycle of a component is series of methods that are invoked in different stages of the component’s existence. Lifecycle methods give ways to interact with component logic before/during/after being used in the DOM.
• Why do you sometimes need to “wrap” functions in useCallback when called from within useEffect?
  • Because it will prevent recreation of a function.
• Why are functional components preferred over class components?
  • Functional components are less code, easier to read, perform better, and make it easier to separate components.
• What is wrong with the following code?
  • We can’t use useEffect() method inside a for loop

Vocabulary

• state hook
  • useState is a Hook that lets you add React state to function components.
• effect hook
  • The Effect Hook lets you perform side effects in function components: import React, { useState, useEffect } from ‘react’; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.
• reducer hook
  • The useReducer is a hook I use sometimes to manage the state of the application. … It acts as an alternate hook to the useState hook to manage complex state in your application. The useReducer hook uses the same concept as the reducers in Redux. It is basically a pure function, with no side-effects.

Preparation

• Custom React Hooks
  • A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks.
  • Custom Hooks are a convention that naturally follows from the design of Hooks, rather than a React feature.
  • Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated.

  • Custom Hooks are JavaScript functions whose names are prefixed with the word use. A custom Hook is a normal function but we hold them to a different standard. By adding the word use to the beginning, it lets us know that this function follows the rules of Hooks.

  • It seems like something we may want to do on several pages or inside numerous different functional components in our app. When information changes we want to update the document title with some type of string. Additionally, we don’t want to repeat this logic inside every functional component. We will start by extracting this code into a Hook locally on the same page, and then see how the same Hook can be imported into many components and co-located. Pretty simple right?
• useReducer
  • An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.
  • useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.
• useFirestoreQuery
  • This hook makes it super easy to subscribe to data in your Firestore database without having to worry about state management. Instead of calling Firestore’s query.onSnapshot() method you simply pass a query to useFirestoreQuery() and you get back everything you need, including status, data, and error. Your component will re-render when data changes and your subscription will be automatically removed when the component unmounts. Our example even supports dependent queries where you can wait on needed data by passing a falsy value to the hook.
• useArray hook
  • Array manipulation is what a dev goes through every weekday. Adding elements to an array or removing an element at a given index is a daily routine for us. useArray reduces this burden by providing us with various array manipulation methods. This hook is a part of the react-hanger package.
• react-use-form-state hook
  • Forms are everywhere, even in the smallest of applications we have to encounter forms and manage their state. Managing form state in React can be a bit unwieldy sometimes. react-use-form-state is a small React Hook that attempts to simplify managing form state, using the native form input elements you are familiar with.
• react-fetch-hook
  • Making ajax calls is like the most basic and most performed task for a frontend developer. And the React community is quick enough to create a hook for this purpose too.
• useMedia hook

  • useMedia is a React sensor hook that tracks the state of a CSS media query. We all know the importance of the media queries and how much important is responsiveness for any site.

  • For further information clicks =>here OR here OR here OR 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