30 Matching Annotations
  1. Nov 2020
  2. Oct 2020
    1. export const validationSchema = {
        field: {
          account: [Validators.required.validator, iban.validator, ibanBlackList],
          name: [Validators.required.validator],
          integerAmount: [
      

      Able to update this schema on the fly, with:

        React.useEffect(() => {
          getDisabledCountryIBANCollection().then(countries => {
            const newValidationSchema = {
              ...validationSchema,
              field: {
                ...validationSchema.field,
                account: [
                  ...validationSchema.field.account,
                  {
                    validator: countryBlackList,
                    customArgs: {
                      countries,
                    },
                  },
                ],
              },
            };
      
            formValidation.updateValidationSchema(newValidationSchema);
          });
        }, []);
      
    1. Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.
    2. Note how we have to duplicate the code between these two lifecycle methods in class. This is because in many cases we want to perform the same side effect regardless of whether the component just mounted, or if it has been updated. Conceptually, we want it to happen after every render — but React class components don’t have a method like this. We could extract a separate method but we would still have to call it in two places.
    3. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.
    1. The $: can also be used to trigger effects.
    2. We can run effects when some data changes using watchEffect - it takes a function that runs whenever a reactive value used inside changes.
    3. It's possible to run a function whenever some reactive state changes using the useEffect hook. In the example we log the length of the todoList whenever it changes. The first argument to useEffect is the function we want to run, and the second is a list of reactive values to track - whenever one of these values changes the effect will run again.
  3. Sep 2020
    1. for example, reactive declarations essentially do the work of React's useMemo, useCallback and useEffect without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).
    1. So the clock component becomes something like this — we express componentDidMount and componentDidUnmount in terms of a useEffect with an empty dependencies array, and componentDidUpdate in terms of a useEffect with explicit dependencies.

    1. Rather than thinking of useEffect as one function doing the job of 3 separate lifecycles, it might be more helpful to think of it simply as a way to run side effects after render – including the potential cleanup you’d want to do before each one, and before unmounting.
    2. With useEffect, you can handle lifecycle events directly inside function components. Namely, three of them: componentDidMount, componentDidUpdate, and componentWillUnmount. All with one function!
  4. Apr 2020
    1. Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.. That's why using async directly in the useEffect function isn't allowed.

      async and useEffect

  5. Sep 2019
  6. Aug 2019
    1. However, using the local storage in React's function components is a side-effect which is best implemented with the Effect Hook which runs every time the value property changes: