0% found this document useful (0 votes)
38 views

Hooks in React

Uploaded by

sergiu.boboc
Copyright
© © All Rights Reserved
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
0% found this document useful (0 votes)
38 views

Hooks in React

Uploaded by

sergiu.boboc
Copyright
© © All Rights Reserved
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 React oleae 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/10 ic 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/10 ic 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/10 ic 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/10 ic 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/10 ic 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/0 ic 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/10 ic 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/10 What 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!

You might also like