Notes on React useState, useRef, useContext hooks; custom hooks ...

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html . 

Using the State Hook, https://legacy.reactjs.org/docs/hooks-state.html

In React why do we need state variable when we have local variable ?, https://www.linkedin.com/pulse/react-why-do-we-need-state-variable-when-have-local-sohil-lalakiya/ . From the above, “React requires state variables as it does not keep track of local variables, so when you attempt to modify them, React does not re-render the DOM.”

I modified the Dave Gray tutorial code to demonstrate that change in local variable does not change the HTML display in React. I also created a plain Javascript version where the code directly updates the HTML and so change in local variable results in change in HTML display. 

About setting state variables (in a function) not having any impact on the state variable value referenced in the code for that (function) invocation, React documentation states: https://react.dev/reference/react/useState, “The set function only updates the state variable for the next render. If you read the state variable after calling the set function, you will still get the old value that was on the screen before your call.”

https://www.daggala.com/react-state-not-updating-immediately/ has a simple code snippet explaining the issue:

function onClick(){
//let’s say last state was 1
setSomeState(2)
console.log(someState); //will log 1 but not 2
}

How to initialize state using React Hooks, https://blog.logrocket.com/initialize-state-react-hooks/

Section “Controlling an input with a state variable” in (Form input element), https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable

Using input field with simple attributes of type (text) and value in a React component resulted in the field being read-only! Later I saw that the console had the following warning: “Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.”

Related article: Unable to type in Input field issue in React [Solved], https://bobbyhadz.com/blog/react-unable-to-type-in-input

Solution is that the input field has to be made a controlled input (value is state variable and onChange sets the state variable).

...

For useEffect hook, please see: Notes on React useEffect, https://raviswdev.blogspot.com/2024/02/notes-on-react-useeffect.html

...

From https://bobbyhadz.com/blog/react-focus-input-on-element

“When we pass a ref prop to an element, e.g. , React sets the .current property of the ref object to the corresponding DOM node.”

From https://react.dev/learn/manipulating-the-dom-with-refs#getting-a-ref-to-the-node : “Finally, pass your ref as the ref attribute to the JSX tag for which you want to get the DOM node:

The useRef Hook returns an object with a single property called current. Initially, myRef.current will be null. When React creates a DOM node for this (div element) React will put a reference to this node into myRef.current. You can then access this DOM node from your event handlers and use the built-in browser APIs defined on it.”

Section “Manipulating the DOM with a ref ” in useRef, https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref

React useRef Hook, https://www.w3schools.com/react/react_useref.asp

https://legacy.reactjs.org/docs/hooks-rules.html

...

Simple explanation of a scenario where createContext and useContext are beneficial to use and how they are used: React useContext Hook, https://www.w3schools.com/react/react_usecontext.asp

The tutorial code has more complicated usage of useContext than above example as the tutorial code uses a separate DataProvider class which uses DataContext.Provider (DataContext is variable returned by createContext()), whereas the above example directly uses UserContext.Provider (UserContext is variable returned by createContext()). Also, the tutorial code sets the provider (DataContext.Provider) value to an object holding multiple state variables whereas the above example sets the provider (UserContext.Provider) value to one single state variable.

Detailed explantion of useContext: https://react.dev/reference/react/useContext

How to Use the React Context API in Your Projects, https://www.freecodecamp.org/news/context-api-in-react/

...

Collection of React Hooks, https://nikgraf.github.io/react-hooks/

react-use, Collection of essential React Hooks. Port of libreact., https://www.npmjs.com/package/react-use

...

In my variation for custom hooks, I chose to use the custom hook directly in Header component whereas the tutorial uses it in the App component and passes on the window width to the Header component. My code seems to work OK. 

Also see: Notes on a useAxios custom hook provided in a (Dave Gray tutorial) React tutorial video, https://raviswdev.blogspot.com/2024/02/notes-on-useaxios-custom-hook-in-react.html .