Reading: Context API

Review, Research, and Discussion

• Describe use cases for useMemo() and useReducer()
  • useMemo()
    • Returns a memoized value.
  • useReducer()
    • When you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.
• Why do custom hooks need the use prefix?
  • Its name should always start with use so that you can tell at a glance that the rules of Hooks apply to it.
• What do custom hooks usually do?
  • Custom hooks allow us to have cleaner functional components, remove logic from the UI layer, and prevent code duplication by bringing common use cases to reusable hooks.
• Using any list of custom hooks, research and name one that you think will be useful in your applications!
  • useArray hook
    • Building a todo list was never this simple. We provide the array in the hook and get access to these methods and array in the todos object below.
      • 

        • For further information clicks =>here

• Describe how a hook that fetches API data might work?

  • First, we’re going to import stuff we’re going to use and create a function. import React, {useState, useEffect} from “react”

    const App = () => {
    return <div> Fetched data will be displayed here</div>
    }
    

  • The next step is to add a useState hook and to define the name of the state - in our case, that’s data. Then, we define the function we’ll use later on to update the state - setData. In the end, we set the initial value of our state, which is null</strong in our case.

    import React, {useState, useEffect} from "react"
    
    const App = () => {
    const [data, setData] = useState(null)
    return <div> Fetched data will be displayed here</div>
    }
    

  • After adding our useState hook to handle the data, the next step is to make the fetch request.

  • First, we’re going to create a constant fetchURL, in case we need to reuse our endpoint to fetch other data, except for posts. You can check here what else you can fetch and play with.

  • Then we create an arrow function named getData and inside of that function, we’re going to call fetch(). Inside fetch, we’re going to provide a previously defined constant fetchURL and add /posts, since we’re fetching posts.

    import React, {useState, useEffect} from "react"
    const fetchURL = "https://jsonplaceholder.typicode.com"
    const App = () => {
    const [data, setData] = useState(null)
    const getData = () =>
        fetch(`${fetchURL}/posts`)
        .then((res) => res.json())
    
    return <div> Fetched data will be displayed here</div>
    }
    

  • After defining our request, it’s time to bring in useEffect. Then we’re calling our getData() function inside of the useEffect hook to set it to the local state.

  • At the end of useEffect, we added an empty array [], because that way, useEffect runs only once.

    import React, {useState, useEffect} from "react"
    const fetchURL = "https://jsonplaceholder.typicode.com"
    const App = () => {
    const [data, setData] = useState(null)
    const getData = () =>
        fetch(`${fetchURL}/posts`)
        .then((res) => res.json())
    
    useEffect(() => {
        getData().then((data) => setData(data))
    }, [])
    return <div> Fetched data will be displayed here</div>
    }
    

  • At this point, we have everything ready to show the data inside our div. We’re going to use a map() function to iterate through this array of data.

    • For further information clicks =>here

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
  • A reducer is a function that determines changes to an application’s state. It uses the action it receives to determine this change. We have tools, like Redux, that help manage an application’s state changes in a single store so that they behave consistently.
  • 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

• Context
  • Context provides a way to pass data through the component tree without having to pass props down manually at every level.
  • In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree
• When to Use Context ?
  • Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
• Before You Use Context

  • Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.

  • If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.

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