{"id":59102,"date":"2023-10-21T14:24:52","date_gmt":"2023-10-21T08:54:52","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=59102"},"modified":"2024-01-02T17:36:59","modified_gmt":"2024-01-02T12:06:59","slug":"react-hooks-state-and-effects-guide","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/react-hooks-state-and-effects-guide\/","title":{"rendered":"React Hooks: State and Effects Guide"},"content":{"rendered":"
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n

React Hooks were introduced in version 16.8 to revolutionize how state and other React features are handled in functional components, eliminating the need for class components. They provide a clean and intuitive way to manage state, side effects, and access key React functionalities. This article will delve into the fundamental hooks in React and their practical applications.<\/p>\n

State Hooks<\/h3>\n

The\u00a0useState<\/code>\u00a0hook allows functional components to incorporate state. It returns an array with two elements: the current state value and a function that allows you to update it.<\/p>\n

import<\/span> React<\/span>, { useState } from<\/span> \"react\"<\/span>;\r\n\r\n\/\/ Functional component named Counter<\/span>\r\nfunction<\/span> Counter<\/span>() {\r\n  \/\/ useState hook to add state to functional component<\/span>\r\n  const<\/span> [count, setCount] = useState<\/span>(0<\/span>);\r\n\r\n  return<\/span> (\r\n    <div>\r\n      <p>Count: {count}<\/p>\r\n      <button onClick={() => setCount(count + 1)}>Increment<\/button>\r\n    <\/div>\r\n  );\r\n}\r\n\r\nexport<\/span> default<\/span> Counter<\/span>;<\/span><\/pre>\n
useReducer<\/code>\u00a0is an alternative to\u00a0useState,<\/code>\u00a0managing complex state logic. It takes a reducer function and an initial state.<\/p>\n
import<\/span> React<\/span>, { useReducer } from<\/span> 'react'<\/span>;\r\n\r\n\/\/ Initial state for the counter<\/span>\r\nconst<\/span> initialState = { count<\/span>: 0<\/span> };\r\n\r\n\/\/ Reducer function for managing state updates<\/span>\r\nfunction<\/span> reducer<\/span>(state, action<\/span>) {\r\n  switch<\/span> (action.type<\/span>) {\r\n    case<\/span> 'increment'<\/span>:\r\n      return<\/span> { count<\/span>: state.count<\/span> + 1<\/span> }; \/\/ Increase count by 1<\/span>\r\n    case<\/span> 'decrement'<\/span>:\r\n      return<\/span> { count<\/span>: state.count<\/span> - 1<\/span> }; \/\/ Decrease count by 1<\/span>\r\n    default<\/span>:\r\n      throw<\/span> new<\/span> Error<\/span>('Unsupported action type'<\/span>); \/\/ Throw an error for unsupported actions<\/span>\r\n  }\r\n}\r\n\r\n\/\/ Functional component named Counter<\/span>\r\nfunction<\/span> Counter<\/span>() {\r\n  \/\/ useReducer hook to manage state with a reducer function<\/span>\r\n  const<\/span> [state, dispatch] = useReducer<\/span>(reducer, initialState);\r\n\r\n  return<\/span> (\r\n    <div>\r\n      <p>Count: {state.count}<\/p>\r\n      <button onClick={() => dispatch({ type: 'increment' })}>Increment<\/button>\r\n      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement<\/button>\r\n    <\/div>\r\n  );\r\n}\r\n\r\nexport<\/span> default<\/span> Counter<\/span>;<\/span><\/pre>\n
Effect Hooks<\/h3>\n
useEffect<\/code>\u00a0combines the functionalities of\u00a0componentDidMount<\/code>,\u00a0componentDidUpdate<\/code>, and\u00a0componentWillUnmount<\/code>\u00a0into a single hook. It allows you to perform side effects in function components.<\/p>\n
import<\/span> React<\/span>, { useState, useEffect } from<\/span> 'react'<\/span>;\r\n\r\n\/\/ Functional component named DataFetcher<\/span>\r\nfunction<\/span> DataFetcher<\/span>() {\r\n  const<\/span> [data, setData] = useState<\/span>(null<\/span>);\r\n\r\n  \/\/ useEffect hook for fetching data<\/span>\r\n  useEffect<\/span>(() =><\/span> {\r\n    \/\/ Fetch data from an API<\/span>\r\n    fetch<\/span>('https:\/\/api.example.com\/data'<\/span>)\r\n      .then<\/span>((response<\/span>) =><\/span> response.json<\/span>()) \/\/ Parse response as JSON<\/span>\r\n      .then<\/span>((data<\/span>) =><\/span> setData<\/span>(data)); \/\/ Update 'data' state with fetched data<\/span>\r\n  }, []); \/\/ Empty dependency array means it only runs on mount<\/span>\r\n\r\n  \/\/ Display the message from 'data', or 'Loading...' if 'data' is null<\/span>\r\n  return<\/span> <p>{data ? data.message : 'Loading...'}<\/p>;\r\n}\r\n\r\nexport<\/span> default<\/span> DataFetcher<\/span>;<\/span><\/pre>\n
Dependency Array<\/strong><\/h3>\n
The second argument of\u00a0useEffect<\/code>\u00a0is an array of dependencies. It determines when the effect will be re-run:<\/p>\n
1. The empty array means that the fetchData function will only be called on the initial render, and not on subsequent renders when the data state changes.<\/p>\n
2. If it contains dependencies, the effect will only run if any of the dependencies have changed since the last render.<\/p>\n
useLayoutEffect<\/code>\u00a0is a synchronous version of\u00a0useEffect<\/code>\u00a0specifically designed for DOM mutations.<\/p>\n
import<\/span> React<\/span>, { useState, useLayoutEffect } from<\/span> \"react\"<\/span>;\r\n\r\nfunction<\/span> ExampleComponent<\/span>() {\r\n  const<\/span> [width, setWidth] = useState<\/span>(0<\/span>);\r\n\r\n  \/\/ useLayoutEffect hook for measuring element width<\/span>\r\n  useLayoutEffect<\/span>(() =><\/span> {\r\n    \/\/ Get the width of the element with the ID 'myElement'<\/span>\r\n    const<\/span> newWidth = document<\/span>.getElementById<\/span>(\"myElement\"<\/span>).offsetWidth<\/span>;\r\n    setWidth<\/span>(newWidth);\r\n  }, []); \/\/ Empty dependency array means it only runs on mount<\/span>\r\n\r\n  return<\/span> (\r\n    <div>\r\n      <div id=\"myElement\">Resizable Element<\/div>\r\n      <p>Width: {width}px<\/p>\r\n    <\/div>\r\n  );\r\n}\r\n\r\nexport<\/span> default<\/span> ExampleComponent<\/span>;<\/span><\/pre>\n
Additional Hooks<\/h3>\n
The\u00a0useContext<\/code>\u00a0hook enables access to the value a React context provides in a functional component, eliminating the need for prop drilling.<\/p>\n
import<\/span> React<\/span>, { useContext, createContext } from<\/span> \"react\"<\/span>;\r\n\r\n\/\/ Step 1: Create a Context<\/span>\r\nconst<\/span> MyContext<\/span> = createContext<\/span>();\r\n\r\n\/\/ Step 2: Create a Provider Component<\/span>\r\nfunction<\/span> MyProvider<\/span>({ children }<\/span>) {\r\n  const<\/span> sharedValue = \"Hello from Context!\"<\/span>;\r\n\r\n  \/\/ Provide the shared value to the children<\/span>\r\n  return<\/span> <MyContext.Provider value={sharedValue}>{children}<\/MyContext.Provider>;\r\n}\r\n\r\n\/\/ Step 3: Consume the Context with useContext<\/span>\r\nfunction<\/span> ChildComponent<\/span>() {\r\n  \/\/ Consume the value provided by MyContext<\/span>\r\n  const<\/span> contextValue = useContext<\/span>(MyContext<\/span>);\r\n\r\n  \/\/ Display the context value<\/span>\r\n  return<\/span> <div>{contextValue}<\/div>;\r\n}\r\n\r\n\/\/ Step 4: Use the Provider to wrap the component tree<\/span>\r\nfunction<\/span> App<\/span>() {\r\n  return<\/span> (\r\n    <MyProvider>\r\n      <ChildComponent \/>\r\n    <\/MyProvider>\r\n  );\r\n}\r\n\r\nexport<\/span> default<\/span> App<\/span>;<\/span><\/pre>\n