score:2
you should have no issues with using react element array as the input to usestate. but, whenever you initialize your state with props coming from parent, you also need to re-update your state once the prop from parent changes. otherwise it will point to the old state passed down from parent in the first pass. and the way to do that is to do a setitems with useeffect hook
useeffect(() => {
setitems(props.items)
}, [props.items])
btw this will only check for the reference equality between the old and the new array, if you want to do deep comparison, you should probably be using something like use-deep-compare-effect
score:10
this is not really recommanded you better do it in the useeffect
because props
in initial state is an anti-pattern.
const [items, setitems] = usestate([]);
useeffect(() => {
setitems(props.items);
},[props.items]);
Source: stackoverflow.com
Related Query
- Passing array of React components to useState returns empty array
- React useState empty array type
- Passing new Array instead of array literal to useState shows empty array
- React Hook useEffect has a missing dependency when passing empty array as second argument
- Passing an array of Components as a Props in React
- How to use useState with Typescript while passing empty array
- React Hooks - useState initializes empty array that becomes object?
- React useState with "deep" array not rerendering components
- React hook forms with nested fields array from an async source returns empty array
- React component method returns empty array
- Passing array to other components after calling Api in react using context
- React useEffect returns empty array after fetching data with axios
- React Hooks useState Array empty with states rendered in the component
- fetching data in react returns an empty array
- React Custom Hook that returns array of Components
- React + TypeScript: Passing components in an Array as props
- After useEffect API call, state set by useState for json data being passed to a component as props returns empty array
- React hook useEffect returns empty array at first
- Passing an array of object to useState throws this error Objects are not valid as a React child (found: object with keys {id, name})
- Calling React useState and passing it a value... Which returns to me that, SetCurrentId is not a function
- Pass usestate array between sibling components in React
- React passing array from component to useState child (modal). Like to pass in as array and return it as array so can save
- React useState related issues, When passing an array to it
- Passing an array of objects to child component rendered within iteration returns undefined error in React
- How to set array of object empty in state object using useState in React JS?
- Rendering React Components from Array of Objects
- React Hooks: useEffect() is called twice even if an empty array is used as an argument
- Passing in class names to react components
- React hooks useState Array
- React useEffect - passing a function in the dependency array
More Query from same tag
- Custom components not being matched using react-router
- Passing data to Carousel component
- Firefox blocked resource due to Type mismatch
- React.js style mutation error......?
- useEffect setData not setting data despite values being new
- Deploying React and Django on Heroku
- Hello, i use NextJs and i need to achieve url like page/[id]/[slug] from page
- How to mirror and resize the part of image with fixed width and height
- Redux-form v6 isDirty (and isPristine) selector not triggering re-render on state change
- Passing props and map
- Type checks not working in a create-react-app typescript project
- Check if State is empty when transferring to a new page
- Material-Table - How to change Detail panel Icon rotation when the row is expanded?
- How to print react-code inside code-tag?
- How to fix error which appeared after upgrading to react-router v6
- Auth0 and react will not update my login button until navigation
- What is the equivalent of v-for in react?
- Showing the distinct values using key property
- How to enter formatted template in React
- How do I extract data from Drawing Manager in react google maps?
- Cardview layout not displaying in the right design pattern
- react change slide in slider after clicking a button
- Found routing for relay modern is not working
- How to correctly implement function wrapper in TypeScript?
- React Context API & Lifecycle methods - How to use together
- Prevent React dev tools from changing props/state
- MDBDataTable: how to add a button in a column when data is a json file?
- HoC with React Hooks
- Unable to apply relayout method to the chart, react-plotly.js
- React - why is my div not displayed on the page from my for loop function