{"id":21902129,"url":"https://github.com/lamaparbat/advanced-react-practises","last_synced_at":"2025-03-22T06:19:07.371Z","repository":{"id":176450594,"uuid":"657521731","full_name":"lamaparbat/Advanced-React-Practises","owner":"lamaparbat","description":"React Advance Library and practises.","archived":false,"fork":false,"pushed_at":"2024-06-13T05:44:51.000Z","size":340,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-27T06:45:35.633Z","etag":null,"topics":["formik","react","react-hook-form","react-lifecycle-hooks","react-portal","react-prism","react-query","scroll-animations","suspense","yup"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/lamaparbat/React-Advance","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lamaparbat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-23T08:44:38.000Z","updated_at":"2024-06-13T05:44:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"1c338704-5f2a-4ae9-b196-1bb693d23439","html_url":"https://github.com/lamaparbat/Advanced-React-Practises","commit_stats":null,"previous_names":["lamaparbat/react-advance","lamaparbat/advanced-react-practises"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lamaparbat%2FAdvanced-React-Practises","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lamaparbat%2FAdvanced-React-Practises/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lamaparbat%2FAdvanced-React-Practises/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lamaparbat%2FAdvanced-React-Practises/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lamaparbat","download_url":"https://codeload.github.com/lamaparbat/Advanced-React-Practises/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244913931,"owners_count":20530931,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["formik","react","react-hook-form","react-lifecycle-hooks","react-portal","react-prism","react-query","scroll-animations","suspense","yup"],"created_at":"2024-11-28T15:16:36.782Z","updated_at":"2025-03-22T06:19:07.342Z","avatar_url":"https://github.com/lamaparbat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Advance Practises\n```\n  1. Error Boundary [ComponentDidCatch || getDerivedStateFromError() ]\n\n     Intro - It is process of handling error in react by utilizing the component lifecycle methods like ComponentDidCatch() \u0026\u0026 getDerivedStateFromError()\n\n     a). ComponentDidCatch()\n        - It is used to catch and handle errors that occur during the rendering of a component's child components.\n\n     b). static getDerivedStateFromError()\n        - It is used to update the component state in response to an error occurring in any of its child components.\n\n  2. Suspense\n     - Best of lazy loading and fallback ui before the async api call resolves.\n\n  3. React-Query\n    - Prioritizing api calls with features like pre-made utility hooks like parallelFetching and caching.\n\n  4. Custom Hooks\n    - utilizing built-in react hooks inside a function and used as a utility function\n\n  5. Memoization (useMemo, memo, useCallback)\n    - resolve re-rendering issues\n\n  6. React Portal\n    - creates a new top-level React tree and injects its children into it.\n    - necessary for proper styling (especially positioning)\n    - generally used when designing Popup Modal, Loading bar, or lightboxes\n\n  7. react-prism     [UI DESIGN COMPONENT]\n    - Code snippet formatter library\n    - support multiple language formatting, font color and background themes\n\n  8. scroll animation using css only\n   - @keyframes, scroll()\n\n  9. Formik with Yup\n  - Formik\n  \n    Pros\n      - Getting values in and out of form state\n      - Validation and error messages\n      - Handling form submission\n\n    Cons\n      - Re-render issues: When one field state change, entire form re-render.\n      - Not suitable if a form is large and field has expensive functions\n\n    Solution / Alternatives\n      - Use react-hook-form library\n\n    Yup - Form validaton schema library\n```\n\n## Hooks\n  1. useDeferredValue()\n    Example: Suppose you are have input field, and\n      - has expensive task in onChange() event and\n      - has update the state after completing expensive task\n      - the state value is set in input field value\n     \n     Problem: You will see input type lagging because everytime u keep pressing keys, the expensive onChange event triggered and update the sate in view and re-render occurs\n     \n     Solution: To solve this issues, useDeferredValue() can be used where it is only used for view part, which works as like debounce and throttling technique.\n\n     ```\n            const  [name, setName] = useState(null);\n            const deferrredName = useDeferredValue(name);\n  \n            const handleChange =  (e) =\u003e {\n                for(let i =0;i\u003c500;i++){console.log(i)}\n                setName(e.target.value)\n            }\n  \n           \u003c\u003e\n              \u003cinput type='text' value={name} onChange={handleChange} /\u003e\n              \u003cspan\u003e{deferrredName}\u003c/span\u003e\n           \u003c/\u003e\n     ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flamaparbat%2Fadvanced-react-practises","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flamaparbat%2Fadvanced-react-practises","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flamaparbat%2Fadvanced-react-practises/lists"}