reading-notes

These are my reading notes for Code Fellows

---

Project maintained by taegorov Hosted on GitHub Pages — Theme by mattgraham

Link Home:

Home

Custom Hooks

• What does a component’s lifecycle refer to?

A component’s journey through mounting, updating, and unmounting from the DOM.

• Why do you sometimes need to “wrap” functions in useCallback when called from within useEffect

It prevents regeneration of functions when that functional component re-renders.

• Why are functional components preferred over class components?

Less code, easier to read/follow, easier to test. It helps that they’re POJO’s.

• What is wrong with the following code?

import React, {useState, useEffect} from 'react';

function MyComponent(props) {
  const [count, setCount] = useState(0);

  function changeCount(e) {
    setCount(e.target.value);
  }

  let renderedItems = []

  for (let i = 0; i < count; i++) {
    useEffect( () => {
      console.log('component mount/update');
    }, [count]);

    renderedItems.push(<div key={i}>Item</div>);
  }

  return (<div>
     <input type='number' value={count} onChange={changeCount}/>
      {renderedItems}
    </div>);
}

I think the {renderedItems} element belongs inside some sort of HTML tag, possibly inside the input element just above it. Otherwise this looks fine to me.

Document the following Vocabulary Terms:

• state hook

The most common type of hook. Often seen as useState(). It’s the class equivalent of updating this.

• effect hook

Side effects - “when a procedure changes a variable from outside its scope”

In React-y terms, this means “when a component’s variables or state changes based on some outside thing”. For example, this could be:

-When a component receives new props that change its state

-When a component makes an API call and does something with the response (e.g, changes the state)

(source for above)

• reducer hook

The first and most important thing to understand about a reducer is that it will always only return one value. The job of a reducer is to reduce. That one value can be a number, a string, an array or an object, but it will always only be one. Reducers are really great for a lot of things, but they’re especially useful for applying a bit of logic to a group of values and ending up with another single result.

(source)