We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 10
A David Oga react/tips &
Understanding hooks
in Reactoleae o Swipe >>>
React hooks are a way to
manage state and side effects
in functional components in
React. They make it easier to
add state and functionality to
your components without
needing to convert them into
class components.
pa
a
fi Save post 2/10ic lation Swipe >>>
useState
This hook allows you to add state to your
functional components. It takes an initial
value and returns an array with two
elements: the current state and a function to
update that state.
AMR kel acta g nena roe
SEO VEINS y) 74 Stee 7a
const [count, setCount] = useState(0);
creates the state and sets 7,
STR MUIR coe)
setCount(3) — updates the state value to 3
fi Save post 3/10ic lation Swipe >>>
useEffect
This hook is used for handling side effects, like
data fetching, DOM manipulation, and more. It
takes two arguments: a function that contains
your side effect code, and an array of
dependencies that specify when the effect
should run. If no dependency is specified, the side
effect code runs only once when it is mounted
initially.
useEffect(() => {
}, [dependencies]);
| Bcencretes 4/10ic lation Swipe >>>
useContext
The useContext hook allows you to access a
context (a global data store that you can use to
share information across various parts of your
application without the need to pass props
through every level of the component tree). You
pass acontext object created using
React.createContext and receive the current
context value.
const value = useContext(MyContext);
| Bcencretes 5/10ic lation Swipe >>>
useReducer
This hook is an alternative to useState when you
have complex state logic. It takes a reducer
function and an initial state or data, and returns
the current state and a dispatch function to
update it.
To change your state, you dispatch actions to
the dispatch function. Each action tells the
reducer what change to make.
const [state, dispatch] = useReducer(reducer, initialData);
F
This function describes how your state
can change based on different actions.
fi Save post 6/10ic lation Swipe >>>
useMemo
useMemo helps optimize your application by
memoizing (caching) the result of a function. It's
particularly useful for preventing unnecessary
recalculations of values, which can improve
performance in your app.
this holds the memoized or cached
(6 value returned by squareNumber
const squareNumber = useMemo(() => {
return number * number;
}, Inumber]);
Nos squareNumber updates only when
number changes it reuses the previous
result otherwise.
fi Save post 7/0ic lation Swipe >>>
useCallback
While useMemo memoizes values, useCallback
helps you optimize your application by memoizing
(caching) functions. It's especially useful for
preventing unnecessary function recreations,
which can improve performance.
const handleClick = useCallback(() => {
[dependencies]);
By using useCallback, you ensure that the
handleClick function is only recreated if the
dependencies change.
| Bcencretes 8/10ic lation Swipe >>>
custom hooks
You can create your custom hooks
to share stateful logic between
components. They typically start
with "use" and can encapsulate any
hook, or combinations of hooks, to
provide a specific behavior or
functionality.
fi Save post 9/10What other topics in react
should i talk about?
sealant dare) alam aal-Rerolanlaat-lale
fi save post 2 Share post
Follow for more content like this!