{"id":18819340,"url":"https://github.com/b-l-u-e/react-hooks-tutorial","last_synced_at":"2025-06-11T05:07:13.678Z","repository":{"id":212477660,"uuid":"731557224","full_name":"b-l-u-e/react-hooks-tutorial","owner":"b-l-u-e","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-24T15:56:20.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-29T09:06:45.541Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/b-l-u-e.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-12-14T10:49:44.000Z","updated_at":"2023-12-14T10:51:40.000Z","dependencies_parsed_at":"2023-12-24T16:51:03.729Z","dependency_job_id":null,"html_url":"https://github.com/b-l-u-e/react-hooks-tutorial","commit_stats":null,"previous_names":["b-l-u-e/react-hooks-tutorial"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-l-u-e%2Freact-hooks-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-l-u-e%2Freact-hooks-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-l-u-e%2Freact-hooks-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-l-u-e%2Freact-hooks-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b-l-u-e","download_url":"https://codeload.github.com/b-l-u-e/react-hooks-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-l-u-e%2Freact-hooks-tutorial/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259204809,"owners_count":22821160,"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":"2024-11-08T00:22:31.406Z","updated_at":"2025-06-11T05:07:13.659Z","avatar_url":"https://github.com/b-l-u-e.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### React State Management\n\n#### UseState\n\n- State - defining variables in react. Has some memory for each component local. Helps to keep track. Data changes with time.\n- State takes initial value if not defined the value is known as undefined.\n\n- using useState in functional component\n\n```\nfunction App(){\n    const [count, setCount] = useState(0)\n\n    const increment = () =\u003e {\n        setCount(count + 1)\n    }\n\n    const decrement = () =\u003e {\n        setCount(count - 1)\n    }\n\n    return(\n        \u003c\u003e\n            \u003cp\u003e {count} \u003c/p\u003e\n            \u003cbutton onClick = {decrement}\u003eDecrement\u003c/button\u003e\n            \u003cbutton onClick = {increment}\u003eIncrement\u003c/button\u003e\n        \u003c/\u003e\n    )\n}\n\n```\n\n3: State is non persistent when user refreshes the page the state disappears.\n\n\n4: using useState in class component\n\n\n```\nimport React, { Component } from 'react'\n\nexport default class App extends Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            count: 0,\n        }\n    }\n\n\n    increment = () =\u003e {\n        this.setState({\n            count: this.state.count + 1\n        })\n    }\n\n    decrement = () =\u003e {\n        this.setState({\n            count: this.state.count - 1\n        })\n    }\n\n  render() {\n    return (\n      \u003c\u003e\n        \u003cp\u003e {this.state.count} \u003c/p\u003e\n        \u003cbutton onClick = {this.decrement}\u003eDecrement\u003c/button\u003e\n        \u003cbutton onClick = {this.increment}\u003eIncrement\u003c/button\u003e\n      \u003c/\u003e\n    )\n  }\n}\n\n```\n\n5: when dealing with class-based component when updating state can be a Asynchronous \n\n```\nimport React, { Component } from 'react'\n\nexport default class App extends Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            count: 0,\n        }\n    }\n\n\n    increment = () =\u003e {\n        this.setState((previousState) =\u003e ({\n            count: previousState.count + 1\n        }))\n    }\n\n    decrement = () =\u003e {\n        this.setState((previousState) =\u003e ({\n            count: previousState.count - 1\n        }))\n    }\n\n  render() {\n    return (\n      \u003c\u003e\n        \u003cp\u003e {this.state.count} \u003c/p\u003e\n        \u003cbutton onClick = {this.decrement}\u003eDecrement\u003c/button\u003e\n        \u003cbutton onClick = {this.increment}\u003eIncrement\u003c/button\u003e\n      \u003c/\u003e\n    )\n  }\n}\n\n```\n\n### UseEffect\n\n1: Its hook to perform side effects on the functional component\n\n2: It's a result of state changes\n\n3: Manipulates state of the component\n\n```\nimport React, { useState, useEffect } from 'react'\n\nfunction App(){\n    const [count, setCount] = useState(0)\n\n    useEffect(() =\u003e{ \n        \u003c!-- the code want to run --\u003e\n        console.log(\"The count is \" + count)\n\n        \u003c!--  optional return function --\u003e\n        // clean up function\n        return () =\u003e {\n            console.log('I am being cleaned up!)\n        }\n        \n\n\n    }, [count]) // the dependency array is used to tell useeffect what it should listen to and what variables it should react\n\n    const increment = () =\u003e {\n        setCount(count + 1)\n    }\n\n    const decrement = () =\u003e {\n        setCount(count - 1)\n    }\n\n    return(\n        \u003c\u003e\n            \u003cp\u003e {count} \u003c/p\u003e\n            \u003cbutton onClick = {decrement}\u003eDecrement\u003c/button\u003e\n            \u003cbutton onClick = {increment}\u003eIncrement\u003c/button\u003e\n        \u003c/\u003e\n    )\n}\n\n```\n\n- For class component\n\n```\nimport React, { Component } from 'react'\n\nexport default class App extends Component {\n    constructor(props) {\n        this.state = {\n            windowWidth: window.innerWidth\n        }\n    }\n\n    componentDidMount() {\n        \u003c!-- Life cycle func = when component mounts/loads --\u003e\n        console.log(\"The app component loaded)\n    }\n\n    componentDidUpdate(prevProps) {\n        \u003c!-- Life cycnc sync = when component props change --\u003e\n\n    }\n\n    componentWillUnmount(prevProps) {\n        \u003c!-- Life cycnc sync = when component unmount/cleanup function --\u003e\n\n    }\n\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eUse effect hook \u003c/h1\u003e\n        \u003ch2\u003eThe window width is: {windowWidth} \u003c/h2\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\n```\n\n3: UseEffect hook variations\n\n```\nimport React, {useEffect, useState} from 'react'\n\nfunction App() {\n    const [windowWidth, setWindowWidth] = useState(window.innerWidth)\n    const [name, setName] = useState(\"\")\n\n    \u003c!--  every render --\u003e\n    useEffect (() =\u003e {\n        console.log(\"I re-rendered\")\n       \n    })\n\n    \u003c!-- on first render / mount only! componentDidMount alternative --\u003e\n    useEffect (() =\u003e {\n       console.log(\"component mounted')\n    }, [])\n\n    \u003c!-- on first render + whenever dependency changes! componentDidUpdate alternative --\u003e\n    useEffect (() =\u003e {\n        console.log(`The name changed: ${name}`)\n    }, [name])\n\n    \u003c!-- follow same rules except this handles unmounting on component - component! - componentWillUnmount alternative --\u003e\n\n    useEffect (() =\u003e{\n         window.addEventListener(\"resize\", updateWindowWidth)\n\n         return () =\u003e {\n            \u003c!-- when component unmounts cleans up code --\u003e\n            \u003c!-- time out, add eventlistener --\u003e\n            window.removeEventListener(\"resize\", updateWindowWidth)\n\n         }\n    }, [])\n\n    const updateWindowWidth = () =\u003e {\n        setWindowWidth(window.innerWidth)\n    }\n\n\n\n  return (\n    \u003cdiv\u003eApp\u003c/div\u003e\n  )\n}\n\nexport default App\n\n\n```\n\n###  useMemo\n\n1: \n\n```\nimport React, { useState, useEffect } from 'react'\n\nfunction App(){\n    const [count, setCount] = useState(0)\n    const [input, setInput] = useState(\"\")\n\n\n    const increment = () =\u003e {\n        setCount(count + 1)\n    }\n\n    const decrement = () =\u003e {\n        setCount(count - 1)\n    }\n\n    return(\n        \u003c\u003e\n            \u003cp\u003e {count} \u003c/p\u003e\n            \u003cbutton onClick = {decrement}\u003eDecrement\u003c/button\u003e\n            \u003cbutton onClick = {increment}\u003eIncrement\u003c/button\u003e\n\n            \u003ch2\u003e{input}\u003c/h2\u003e\n            \u003cinput onChange={(e) =\u003e setInput(e.target.value)} type=\"text\" /\u003e\n\n            \n        \u003c/input\u003e\n    )\n}\n\n```\n\n***callback function***\n\nA higher-order function is a function that either accepts functions as parameters, return a function or both.\n\nFunctions get passed in as parameters are callback functions. \n\nCallback functions get invoked during the execution of the higher-order function.\n\nHow higher-order function and callback function works?\n\n1: When invoke higher-order function and pass another function in as an argument. We dont invoke the argument function, invoking will evalute to passing in the return value of that function call. \n\n2: With callback functions we pass in function itself by typing the function name without the parentheses.\n\n```\n\n\u003c!-- callback function --\u003e\n\nconst addTwo = num =\u003e {\n  return num + 2;\n}\n\n\u003c!-- higher order function --\u003e\n\nconst checkConsistentOutput = (func, val) =\u003e {\n  let checkA = val + 2\n  let checkB = func(val)\n  if(checkA === checkB) {\n    return func(val)\n  }\n  return \"inconsistent results\"\n\n}\n\nconsole.log(checkConsistentOutput(addTwo, 2));\n\n\n\n```\n***iterators***\n\niterators are methods called on arrays to manipulate elements and return values.\n\n***.forEach() method, .map() method, .filter() method, .findIndex(), .reduce() method***\n\n```\nconst artists = ['Picasso', 'Kahlo', 'Matisse', 'Utamaro']\n\nartists.forEach(artist =\u003e {\n    console.log(artist + ' is one of my favorite artists.')\n})\n\nconst numbers = [1, 3, 5, 7, 9]\n\nconst squareNumbers = numbers.map(number =\u003e {\n    return number * number\n})\n\nconsole.log(squareNumbers)\n\nconst things = ['desk', 'chair', 5, 'backpack', 3.14, 100];\n\nconst onlyNumbers = things.filter(thing =\u003e {\n  return typeof thing === 'number';\n});\n\nconsole.log(onlyNumbers);\n\n```\n***forEach method***\n\n- Different ways to pass in callback functions as arguments in iterators\n\n- The return value for .forEach() will always be undefined.\n\n1: use a pre-defined function\n\n    ```\n      const groceries = ['brown sugar', 'salt', 'cranberries', 'walnuts']\n\n      groceries.forEach(function(groceryItem) {\n        console.log(' - ' + groceryItem)\n      })\n    ```\n\n2: use Arrow function syntax\n    ```\n    const groceries = ['brown sugar', 'salt', 'cranberries', 'walnuts']\n\n    groceries.forEach(groceryItem =\u003e console.log(groceryItem));\n\n    ```\n\n3: Define function beforehand to be used as callback function\n\n```\nconst groceries = ['brown sugar', 'salt', 'cranberries', 'walnuts']\n\nfunction printGrocery(element){\n    console.log(element)\n}\n\ngroceries.forEach(printGrocery)\n\n```\n\n***map method***\n\n- returns new array\n\n```\nconst numbers = [1, 2, 3, 4, 5, 6 ]\n\nconst bigNumbers = numbers.map(number =\u003e {\n    return number * 10\n})\n\nconsole.log(bigNumbers)\n\n```\n\n***filter method***\n\n- returns new array of elements after filtering certain elements from original array. The callback function for the filter method should return true or false depending on the element that is passed to it.\n\n```\nconst nums = [123, 25, 78, 5, 9]\n\nconst lessThanTen = nums.findIndex(num =\u003e {\n    return num \u003c 10 \n})\n\n```\n\n- The elements that cause the callback function to return true are added to the new array.\n\n\n***findIndex method***\n\n- returns the index of the first element that evaluates to true in the callback function\n\n```\nconst nums = [123, 25, 78, 5, 9]\n\nconst lessThanTen = nums.findIndex(num =\u003e {\n    return num \u003c 10 \n})\n\n```\n\n***reduce method***\n\n- returns a single value after iterating through the elements of the array, thereby reducing the array\n\n```\nconst numbers = [1, 2, 4, 10]\n\nconst sum = numbers.reduce((accumulator, currentValue) =\u003e{\n    return accumulator + currentValue\n})\n\nconsole.log(sum)\n\n``` \n\n- The value of accumulator starts off as the value of the first element in the array.\n\n- currentValue starts as the second element, takes on the value of the current element in the looping process\n\n- .reduce() method can also take an optional second parameter to set an initial value for accumlator\n\n```\nconst sum = numbers.reduce((accumulator, currentValue) =\u003e{\n    return accumulator + currentValue\n}, 100)\n\n```\n\n***some() method \u0026 every()method***\n\n- returns a boolean value that indicates whether the current value is true or false.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb-l-u-e%2Freact-hooks-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb-l-u-e%2Freact-hooks-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb-l-u-e%2Freact-hooks-tutorial/lists"}