Hooks help writing reusable code.
useState – Function that lets you use state in a functional component.
inside your functional component, deconstruct an array and pass in 2 values, first value will be a getter function and second value will be a setter, then call the useState function and pass in the initial value as a parameter.
const [term, setTerm] = useState("");
when you want to get the value, simply call term, when you want to set the value, simply use the setTerm() function.
useEffect – Function that lets you use something similar to lifecycle methods in functional components.
pass 2 arguments, first argument is what is going to happen, generally an empty arrow function, second argument is WHEN its going to happend.
No 2nd argument: initial render and every rerender, an empty array: only initial render, and array with value(s), initial and when the component rerenders and the data passed along in the array has CHANGED.
useEffect(() => {
console.log(searchTerm);
}, [searchTerm]);
working with async and await when using useEffect.
simply create a small helper function inside of the function that is passed into useEffect that is asynchronous, then immediately after simply call the helper function.
useEffect(() => {
const search = async () => {
await axios.get("");
};
search();
}, [searchTerm]);
2nd method:
useEffect(() => {
//defines function and invokes immedietely
(async () => {
await axios.get("");
})();
}, [searchTerm]);
3rd approach is utilizing promises.
useEffect(() => {
axios.get("test")
.then((response) => {
console.log(response.data);
});
}, [searchTerm]);
clean up code with useEffect,
a return statement in the useEffect can ONLY return a function!
whats inside that function will be saved and triggered next time useEffect is being used!
example:
useEffect(() => {
const timeoutId = setTimeout(() => {
//set the debouncedSearchTerm to the new searchTerm
setDebouncedSearchTerm(searchTerm);
}, 500);
//whats in the return statement of the useEffect does not get triggered upon initial render
// it will be saved in memory and invoked immedeitely upon next render, perfect for cleanup!
return () => {
//run this code NEXT time it gets rendered!
clearTimeout(timeoutId);
};
}, [searchTerm]);
useRef – Function that lets you create a ref in a function component.
More predefined hooks:
useContext, useReducer, useCallback, useMemo, useImperativeHandle, useLayoutEffect, useDebugValue
