With a React Hooks' setter, how can I set data before the component renders?

react hooks example
react hooks useeffect
react hooks tutorial
react lifecycle hooks
react useref
react hooks vs redux
react hooks usestate
react hooks componentdidmount

I export a JS object called Products to this file, just to replace a real API call initially while I am building/testing. I want to set the function's state to the object, but mapped. I have the component looking like this:

function App() {
  const [rooms, setRooms] = useState([]);
  const [days, setDays] = useState([]);
  const roomsMapped = products.data.map(room => ({
    id: room.id,
    title: room.title
  }))

  useEffect(() => {
    setRooms(roomsMapped);
  })

  return ( etc )

This returns the following error: Error: Maximum update depth exceeded.

I feel like I'm missing something really obvious here, but am pretty new to React and Hooks. How can I set this data before the component renders?

Just declare it as initial value of rooms

 const Component = () =>{
     const [rooms, setRooms] = useState(products.data.map(room => ({
         id: room.id,
         title: room.title
      })))
 }

You can also use lazy initial state to avoid reprocessing the initial value on each render

 const Component = () =>{
     const [rooms, setRooms] = useState(() => products.data.map(room => ({
         id: room.id,
         title: room.title
      })))
 }

Hooks at a Glance – React, Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes — they let you use React� Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [ count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

Change useEffect to this

useEffect(() => {
    setRooms(roomsMapped);
  },[])

Hooks API Reference – React, Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. This page describes the APIs for the built-in� React hooks allows us to take a Reactjs functional component and add state and lifecycle methods to it. In simple words, React hooks are special functions to extend the capabilities of functional components and give them the possibility to have lifecycle events and manage state.

With Lazy initialisation with function as a parameter of useState

import React, { useState } from "react";

function App() {
  const [rooms, setRooms] = useState(() => {
    // May be a long computation initialization
    const data = products.data || [];
    return data.map(({ id, title }) => ({ id, title }));
  });

  return (
    // JSX stuffs
  )
}

Using the State Hook – React, import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return� Custom hooks. Custom hooks are JavaScript functions, whose name starts with use and they can call other react hooks. Now, we are removing the counter logic from the above example and creating our own custom hook called useCounter.

You can use default props for this.set initial value with empty list .

Building Your Own Hooks – React, They let you use state and other React features without writing a class. Building your own Hooks lets you extract component logic into reusable functions. When we� One of the best things that React Hooks brought to us was the ability to share code and state logic in any component that we want. We can easily create a custom hook and use it everywhere now, which makes for better state logic and streamlined, reused code.

You are getting 'Error: Maximum update depth exceeded', because your useEffect function doesn't have dependency array. Best way to fix this is to pass empty array as the second argument to useEffect like this:

useEffect(() => {
    setRooms(roomsMapped);
  },[]) <= pass empty array here 

this will prevent component to re render, it you want your component to re render on props change you can pass the props in the array like this:

useEffect(() => {
    setRooms(roomsMapped);
  },[props.props1,props.props2])

here you can pass as many props as you want...

Hooks FAQ – React, Do Hooks replace render props and higher-order components? What do Hooks mean for popular APIs like Redux connect() and React Router? Do Hooks work� React Hooks are a new addition in React 16.8 that let you use state and other React features without writing a class component. In other words, Hooks are functions that let you “hook into” React state and lifecycle features from function components.

Using the Effect Hook – React, Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. The Effect Hook lets you perform side effects in� React Hooks are more powerful than you think. Today, we are going to explore it and develop a custom Hook to manage global states, easier.

Rules of Hooks – React, Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure� Browse other questions tagged react-native if-statement async-await react-hooks or ask your own question. The Overflow Blog Podcast 256: You down with GPT-3?

Getting Started With The React Hooks API — Smashing Magazine, What Are React Hooks? React Hooks are in-built functions that allow React developers to use state and lifecycle methods inside functional�