942 Matching Annotations
  1. Nov 2023
    1. useInterval( () => { if (typeof window !== "undefined" && window.google) { setGoogle(window.google); setGoogleIsLoading(false); } }, googleIsLoading ? 100 : null );
  2. Sep 2023
    1. You'll only need the trailing * when there is another <Routes> somewhere in that route's descendant tree. In that case, the descendant <Routes> will match on the portion of the pathname that remains (see the previous example for what this looks like in practice).

      Something to do with routes in index.js and routes in app.js

  3. Aug 2023
  4. May 2023
    1. 你可能以为当你勾选复选框的时候 state 会被重置,但它并没有!这是因为 两个 <Counter /> 标签被渲染在了相同的位置。 React 不知道你的函数里是如何进行条件判断的,它只会“看到”你返回的树。在这两种情况下,App 组件都会返回一个包裹着 <Counter /> 作为第一个子组件的 div。这就是 React 认为它们是 同一个 <Counter /> 的原因。

      React 组件更新机制 tip 1

  5. Apr 2023
    1. manter um estado local em uma função de um compo-nente funcional

      Um Hook em React Native é uma função que permite que um componente funcional tenha um estado interno e execute efeitos colaterais, sem a necessidade de criar componentes de classe.

      O useState é um dos Hooks mais utilizados Ele permite manter um estado local em uma função de um componente funcional. Para usá-lo, declara-se uma variável e uma função de atualização de estado usando o useState Hook

    1. The state is only initialized during the first render.

      Anti pattern: Initializing state with prop

      This is a common example of redundant state

  6. Mar 2023
    1. ```js

      export const loader = async () => {

      // fire them all at once<br /> const critical1Promise = fetch('/test?text=critical1&delay=250').then(res => res.json()); const critical2Promise = fetch('/test?text=critical2&delay=500').then(res => res.json()); const lazyResolvedPromise = fetch('/test?text=lazyResolved&delay=100').then(res => res.json()); const lazy1Promise = fetch('/test?text=lazy1&delay=500').then(res => res.json()); const lazy2Promise = fetch('/test?text=lazy2&delay=1500').then(res => res.json()); const lazy3Promise = fetch('/test?text=lazy3&delay=2500').then(res => res.json()); const lazyErrorPromise = fetch('/test?text=lazy3&delay=3000').then(res => { throw Error('Oh noo!') });

      // await for the response return defer({ critical1: await critical1Promise, critical2: await critical2Promise, lazyResolved: lazyResolvedPromise, lazy1: lazy1Promise, lazy2: lazy2Promise, lazy3: lazy3Promise, lazyError: lazyErrorPromise }) } ```

  7. Feb 2023
  8. Jan 2023
  9. Dec 2022
    1. React JS is a JavaScript library used to create extensible and adaptable user interfaces. Our React development company team of the best React.js / React developers, software engineers, and programmers in India provides custom React development services that handle data updates and synchronization without page reloading, as well as integration with existing applications or systems.

    2. React JS development services, an extensible and adaptable JavaScript library for creating user interfaces. Our team of the best React.js / React developers, software engineers, and programmers in India provides custom React js development services.

  10. Nov 2022
  11. Oct 2022
  12. Sep 2022
  13. Aug 2022
    1. Chadeau-Hyam, M., Wang, H., Eales, O., Haw, D., Bodinier, B., Whitaker, M., Walters, C. E., Ainslie, K. E. C., Atchison, C., Fronterre, C., Diggle, P. J., Page, A. J., Trotter, A. J., Ashby, D., Barclay, W., Taylor, G., Cooke, G., Ward, H., Darzi, A., … Elliott, P. (2022). SARS-CoV-2 infection and vaccine effectiveness in England (REACT-1): A series of cross-sectional random community surveys. The Lancet Respiratory Medicine, 0(0). https://doi.org/10.1016/S2213-2600(21)00542-7

    1. And in our case, we want it to keep track of our storage object. So let's also create a usePeristentContext hook.

      ```js import { useMutation, useQuery, useQueryClient } from 'react-query';

      export default function usePersistentContext(key) { const queryClient = useQueryClient();

      const { data } = useQuery(key, () => localStorage.getItem(key));

      const { mutateAsync: setValue } = useMutation( (value) => localStorage.setItem(key, value), { onMutate: (mutatedData) => { const current = data; queryClient.setQueryData(key, mutatedData); return current; }, onError: (_, __, rollback) => { queryClient.setQueryData(key, rollback); }, } );

      return [data, setValue]; } ```

      js function SetContext() { const [value, setValue] = usePersistentContext('item_context'); return ( <button onClick={() => setValue(value === 'on' ? 'off' : 'on')}> Click me {value} </button> ); }

  14. Jul 2022
    1. this.handleChange

      change事件更新state,也就是用户输入的value,这就是受控组件

    2. this.state.value

      value随用户输入而改变state

    1. 想要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.createRoot(): const root = ReactDOM.createRoot( document.getElementById('root') ); const element = <h1>Hello, world</h1>; root.render(element);

      createRoot()返回一个ReactDOM对象,该对象具有render方法。

    1. React may batch multiple setState() calls into a single update for better performance.

      so its not an actual race condition b/w two parallel instructions, but rather just a result of an optimisation performed by react

  15. Jun 2022
    1. If the component wrapped with memo re-renders, it means that one of its properties changes.
  16. May 2022
    1. React Helmet

      ```js import {Helmet} from "react-helmet";

      const Demo = props => ( <br /> <div className="application"> <Helmet> <script src="/path/to/resource.js" type="text/javascript" /> </Helmet> ... </div>

      ); ```

      DOM Method

      ```js componentDidMount () { const script = document.createElement("script"); script.src = "/path/to/resource.js"; script.async = true; document.body.appendChild(script); }

      export const appendScript = (scriptToAppend) => { const script = document.createElement("script"); script.src = scriptToAppend; script.async = true; document.body.appendChild(script); }

      class Demo extends React.Component { componentDidMount () { appendScript("/path/to/resource.js"); } } ```

      React Hooks

      js useEffect(() => { const script = document.createElement('script'); script.src = "/path/to/resource.js"; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); } }, []);

      ```js import { useEffect } from 'react'; const importScript = resourceUrl=> { useEffect(() => { const script = document.createElement('script'); script.src = resourceUrl; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); } }, [resourceUrl]); };

      const Demo = props => { importScript("/path/to/resource.js"); } ```

  17. Mar 2022
  18. Feb 2022
    1. js queryClient .getQueryCache() .findAll(['partial', 'key']) .forEach(({ queryKey }) => { queryClient.setQueryData(queryKey, newData) })

    1. However there are some restrictions: if you are going to use different URLs for GET/PATCH, for example, you have to use the same key, otherwise, React Query will not be able to match these queries.

      It is ok to use url as key for React query

  19. Jan 2022
    1. Routen, A., O’Mahoney, L., Ayoubkhani, D., Banerjee, A., Brightling, C., Calvert, M., Chaturvedi, N., Diamond, I., Eggo, R., Elliott, P., Evans, R. A., Haroon, S., Herret, E., O’Hara, M. E., Shafran, R., Stanborough, J., Stephenson, T., Sterne, J., Ward, H., & Khunti, K. (2022). Understanding and tracking the impact of long COVID in the United Kingdom. Nature Medicine, 28(1), 11–15. https://doi.org/10.1038/s41591-021-01591-4