When I click the "Add Component" button, I add a React component to the array and render the array. Each component is rendered by passing it as a property to the count hook.

The problem is that once the component is added to the array and rendered out, even if I increment the count via the button, the count hook updates, but the component rendered from the array does not update. When I click the "Add Component" button again, the new component will be rendered with the updated hook. But previous components will not be updated as they are added.

App.js

import React, { useState } from 'react'; import Component from './Components/Component'; function App() { const [comp, setComp] = useState([]); const [count, setCount] = useState(0); const addComp = ()=>{ setComp(prevState=>{ return([...prevState,]) }) } const increment = ()=>{ setCount(prevState=>prevState+1) } return ( <>   {comp}  ) } # export default App;

Component.jsx

import React from 'react' export default function Component(props) { return ( {props.count}
 ) }

import React, { useState } from 'react'; import Component from './Components/Component'; function App() { const [comp, setComp] = useState([]); const [count, setCount] = useState(0); const addComp = () => { setComp(prevState=>[...prevState, count]) } const increment = () => { setCount(prevState=>prevState+1) } return ( <> {comp.map((c,index) => )} ) } # export default App;

reply all (1)

P粉8418709422023-09-09 10:33:27 1 floor

useState() hook actually recommends storing primitive types or simple objects. It's a cool idea to store components in it, but it's really a heavy burden on React from a performance perspective.

A better solution is to use primitive type values and pass these values to the map when rendering. Here's a good example: