{"id":23876767,"url":"https://github.com/vikasutf8/revisit-javascript","last_synced_at":"2025-07-04T01:05:02.315Z","repository":{"id":270375475,"uuid":"798394936","full_name":"vikasutf8/revisit-JavaScript","owner":"vikasutf8","description":"Revision Js on. Reactjs and Bun and documation at readme.md also TypeScript","archived":false,"fork":false,"pushed_at":"2025-01-02T19:26:15.000Z","size":60,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-22T21:29:41.922Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/vikasutf8.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":"2024-05-09T17:31:11.000Z","updated_at":"2025-02-04T13:12:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"bdd19674-401b-44a1-bf36-0ff5d40129c9","html_url":"https://github.com/vikasutf8/revisit-JavaScript","commit_stats":null,"previous_names":["vikasutf8/revisit-javascript"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vikasutf8/revisit-JavaScript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikasutf8%2Frevisit-JavaScript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikasutf8%2Frevisit-JavaScript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikasutf8%2Frevisit-JavaScript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikasutf8%2Frevisit-JavaScript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vikasutf8","download_url":"https://codeload.github.com/vikasutf8/revisit-JavaScript/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikasutf8%2Frevisit-JavaScript/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263427306,"owners_count":23464842,"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":[],"created_at":"2025-01-03T19:32:13.344Z","updated_at":"2025-07-04T01:05:02.275Z","avatar_url":"https://github.com/vikasutf8.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + js/ts + bun\n\n### Use formData in React:\n--learn about controlled and uncontrolled fields \n\n-- also using third party abstractions like formil and react hook form which employed controlled and uncontrolled techniques under the hood.\n\nGoal is collecting dataa :: with controlled your data in  your state, uncontrolled you need to collect the form values yourself.\n\nuncontrolled. -- input field and useRef hook using that passing inputRef\n\n`constt inputRef =useRef\u003cHTMLInputElement\u003e(null);` \n\n`\u003cinput ref={inputref}/\u003e`  clg(inputref.current.value\u003e\n\nControlled state. -- using usestate hook as storing state. \n\n`cosnt [username,setUsername] =useState(\"\")` \n\n`input value={username} onchange={(e)=\u003esetUsername(e.target.value)}`  clg(username)\n\n\n\n**React19 --FormData**\n\n-- in it we dont need to refs to get the values of uncontrolled form.we can just read that form values directly off e.target\n\n**using name property of input fiile as as formdata via new FormData(e.target)**\n\n-- typeScript taking issue in [e.target]] soo moiving `event.currentTarget` \n\n--  also `clg(formdata)`  nothing ginev dat we should use formdata.get(\"usernname\") for console\n\n-  to unpack values. O**bject.fromEntries()**\n`cosnt formValues =Object.formEntries(formData); clg(formValues)` \n\nusing typeScript formValues TYPEs is just not only String ...if formvalue.username ==empty return \"FormDataEntryValue\" |null,\n\n**Convert formdata into interger**\n\n`const quanty =parseInt((formData.get('quantity') as string | null) || 0)` \n\n\n\n**Problem are resolve by ZOd ::**\n\nZod is schema based js validator .zod validates it based the schema you wrote but then also gives you back your data but in type-safe way according to schema passed\n\n\n### Use formData in React:[reacttraining.com/blog/react-and-form-data](https://reacttraining.com/blog/react-and-form-data) \n--learn about controlled and uncontrolled fields \n\n-- also using third party abstractions like formil and react hook form which employed controlled and uncontrolled techniques under the hood.\n\nGoal is collecting dataa :: with controlled your data in  your state, uncontrolled you need to collect the form values yourself.\n\nuncontrolled. -- input field and useRef hook using that passing inputRef\n\n`constt inputRef =useRef\u003cHTMLInputElement\u003e(null);` \n\n`\u003cinput ref={inputref}/\u003e`  clg(inputref.current.value\u003e\n\nControlled state. -- using usestate hook as storing state. \n\n`cosnt [username,setUsername] =useState(\"\")` \n\n`input value={username} onchange={(e)=\u003esetUsername(e.target.value)}`  clg(username)\n\n\n\n**React19 --FormData**\n\n-- in it we dont need to refs to get the values of uncontrolled form.we can just read that form values directly off e.target\n\n**using name property of input fiile as as formdata via new FormData(e.target)**\n\n-- typeScript taking issue in [e.target]] soo moiving `event.currentTarget` \n\n--  also `clg(formdata)`  nothing ginev dat we should use formdata.get(\"usernname\") for console\n\n-  to unpack values. O**bject.fromEntries()**\n`cosnt formValues =Object.formEntries(formData); clg(formValues)` \n\nusing typeScript formValues TYPEs is just not only String ...if formvalue.username ==empty return \"FormDataEntryValue\" |null,\n\n**Convert formdata into interger**\n\n`const quanty =parseInt((formData.get('quantity') as string | null) || 0)` \n\n\n\n**Problem are resolve by ZOd ::**\n\nZod is schema based js validator .zod validates it based the schema you wrote but then also gives you back your data but in type-safe way according to schema passed\n\n\n\nreact19 also using useActionState Hooks similiar to FormData as it can passed to formAction\n\n\n\n\n\n### Can You modified React Props ??[www.epicreact.dev/can-you-modify-react-props](https://www.epicreact.dev/can-you-modify-react-props) \n\n\n## Hooks:\n### useState :\n-- state that data change with time,different data one render to different render as JSX.\n\n-- state a piece of data that changes over a time ,render in react.\n\n`const [count(variable) ,setcount(function updater)] =React.useState(initial /defualt value at t=0/no render) `// first is variable ,second is function that update states and \n\nwith defualt value its undefine---\n\n### useEffect :\nit used to perform **side effects** in our application.Side Effect meant things happening as a consequence of something else. eg :taking a medicine its having side effect also ..similiarilly happening with application,something. triggers ,getting .. this side effect happend due to state changing .\n\nWhat is side effect ,how to control it ?\n\n`useEffect(()=\u003e{its a function that we want to run \u0026\u0026 optional return function } ,[dependancy array, what useeffect listen to and run to code])` \n\nNOTE :: if you provide any thing in depandency array/ not -- it always first time run//.meant any thing happened** it run at least once.   **componen mount..mounted\n\n**LifeCycle of useEffect ::IMPORTANT**\n\n- first its run itself beform complete mount,,meant unmount ...only code..\n- after change on depandency --first it clean ourself as runt return function that optional to give by  it on changing it run return function then unmounted code/recreated.. of useeffect \n- return optional function is cleanup /or destored initialstate of rendeering react page.\n### useMemo: \n--problem that not memorized that value having performance issues.\n\nAs in react ifwe update anything ,we re-render entire page... as on changing count ..below we create looping of 1e6 time on each rendering ..mean we count incease one .it lopping run million time ,them cnt++ again 1e6 time..going on.\n\n//we compute that loop without it use .. so we can only compute looping when it requried like once or twice or certain points..not all count updates\n\n**useMemo is Hook that memorizes a value and returns the same value until any of depandenies in the dependency array changes ,until then it will recompute a new value..**\n\n```\nconst selecteditem = useMemo(()=\u003e(items.find((item)=\u003e item.isSelected)),[items])\n```\nNOTE :: depandency array should be use carefully --all stuff that changing \n\n\n\n### useCallback :::\n**in react a function is having same code ,doing same things they will considered different on every render..if function === function return false.  **\n\n\n\n### useRef :::\nref is similiar to state ,in the sence that can hold and mutate values that are used in your component but main difference is  that unlike state \u0026 ref does not trigger a re-render in component and ref value are not used in the return body of that actual component its not used for something that you are rendering ,its. hooks that is used for values that are not needed  for rendering .\n\n```\nconst countRef =useRef(0) \ncountRef.current++ // .current is method to get values\n//it update value without waiting of re-rendering of page. it just read and update it, working just refeclting instanlty\n```\nRef does not trigger a component for re-render..meant on updating ref.current it cant active react re-rendering so its page not reload..so never use ref in return function of page\n\n-- using input component that directly in return function using \n\n```\nconst inputRef =useRef\u003cHTMLElement | null\u003e(null)\n\nuseEffect(()=\u003e{\n  inputRef.current?.focus()\n})\nreturn(\n  \u003cinput ref ={inputRef} type ='text' placeholder='' /\u003e\n)\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikasutf8%2Frevisit-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvikasutf8%2Frevisit-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikasutf8%2Frevisit-javascript/lists"}