React Hooks
That you're likely going to use
Github: /rizzabh/react-hooks
Made this project to implement my understanding of hooks lol.
useState
useEffect Example:
Once you click the button the bg will change as a sideEffect
because inside the dependency array ive used the above button's state.
and wont ever change unless you refresh the page because the state gets reset
useReducer Example:
Counter: 0
But how does this hook act different than useState?
What i believe is... useReducer lets you play with states based on "Actions" which we use in switch statements.
and useState is used for single state management. Take a loot at the code to see the difference.
useRef
Stopwatch using useRef
Timer: 00:00:00.00
Major difference in useState and useRef is that useRef is mutable, to make changes in a state using useState we use a second variable to make the change in Ui so the declaration in useState of a single variable is like const[state,setState] = useState(); but in useRef: const intervalRef = useRef( );
Let us understand a simpler and DOM related use case of useRef with input focus.
The default action of input focus triggers when its clicked,We can do it on will by using useRef and passing the input as DOM and focusing it.
useMemo
So let us say we want to compute a very large problem and over here its nothing but just a delay of 5 seconds Once the computation is done im memoizing it in delayedContent.
Loading...
useCallback
So just like how useMemo is used to memoize the states, useCallback is used to memoize functions (callback functions), Let us understand with an example of a todolist
In this example we will memoize the Delete function of a todolist so that it does not re-render the whole list: