/memeGenerator

Primary LanguageJavaScriptMIT LicenseMIT

meme generator https://generatememe.herokuapp.com/

learning

state

state refers to a value that are managed by component.

changing value -- should be saved and displayed using state.

 * Note: if you ever need the old value of state
 * to help you determine the new value of state,
 * you should pass a callback function to your
 * state setter function instead of using
 * state directly. This callback function will
 * receive the old value of state as its parameter,
 * which you can then use to determine your new
 * value of state.

form

  1. In a JS app, at what point in the form submission process do you gather all the data from the filled-out form? Right before the form is submitted.

  2. In a React app, when do you gather all the data from the filled-out form? As the form is being filled out. The data is all held in local state.

  3. Which attribute in the form elements (value, name, onChange, etc.) should match the property name being held in state for that input? name property.

  4. What's different about saving the data from a checkbox element vs. other form elements? A checkbox uses the checked property to determine what should be saved in state. Other form elements use the value property instead.

  5. How do you watch for a form submit? How can you trigger a form submit?

  • Can watch for the submit with an onSubmit handler on the form element.
  • Can trigger the form submit with a button click.

API

  1. GET the data (fetch)
  2. Save the data to state

useEffect

  1. What is a "side effect" in React? What are some examples?
  • Any code that affects an outside system.
  • local storage, API, websockets, two states to keep in sync
  1. What is NOT a "side effect" in React? Examples?
  • Anything that React is in charge of.
  • Maintaining state, keeping the UI in sync with the data, render DOM elements
  1. When does React run your useEffect function? When does it NOT run the effect function?
  • As soon as the component loads (first render)
  • On every re-render of the component (assuming no dependencies array)
  • Will NOT run the effect when the values of the dependencies in the array stay the same between renders
  1. How would you explain what the "dependecies array" is?
  • Second paramter to the useEffect function
  • A way for React to know whether it should re-run the effect function