React why child component doesn t update when prop changes

Question

Why in the following pseudo-code example Child doesn t re-render when Container changes foo bar    Container     handleEvent         this props foo bar   123         render         return  lt Child bar  this props foo bar    gt     Child     render         return  lt div gt  this props bar  lt  div gt          Even if I call forceUpdate   after modifying the value in Container  Child still shows the old value

User · Answer

You should probably make the Child as functional component if it does not maintain any state and simply renders the props and then call it from the parent. Alternative to this is that you can use hooks with the functional component (useState) which will cause stateless component to re-render.

Also you should not alter the propas as they are immutable. Maintain state of the component.

Child = ({bar}) => (bar);

User · Answer

Use the setState function  So you could do         this setState  this state foo bar 123      inside the handle event method   Once  the state is updated  it will trigger changes  and re-render will take place

User · Answer

In my case I was updating a loading state that was passed down to a  component  Within the Button the props loading was coming through as expected  switching from false to true  but the ternary that showed a spinner wasn t updating  I tried adding a key  adding a state that updated with useEffect   etc but none of the other answers worked  What worked for me was changing this  setLoading true   handleOtherCPUHeavyCode     To this  setLoading true   setTimeout      gt    handleOtherCPUHeavyCode      1   I assume it s because the process in handleOtherCPUHeavyCode is pretty heavy and intensive so the app freezes for a second or so  Adding the 1ms timeout allows the loading boolean to update and then the heavy code function can do it s work

User · Answer

You should use setState function  If not  state won t save your change  no matter how you use forceUpdate   Container       handleEvent       gt       use arrow function           this props foo bar   123           You should use setState to set value like this          this setState  foo   bar  123                 render             return  lt Child bar  this state foo bar    gt            Child           render                 return  lt div gt  this props bar  lt  div gt                      Your code seems not valid  I can not test this code

User · Answer

Update the child to have the attribute  key  equal to the name  The component will re-render every time the key changes  Child     render         return  lt div key  this props bar  gt  this props bar  lt  div gt

User · Answer

I was encountering the same problem  I had a Tooltip component that was receiving showTooltip prop  that I was updating on Parent component based on an if condition  it was getting updated in Parent component but Tooltip component was not rendering    const Parent        gt       let showTooltip   false     if        showTooltip   true       return         lt Tooltip showTooltip  showTooltip  gt  lt  Tooltip gt           The mistake I was doing is to declare showTooltip as a let   I realized what I was doing wrong I was violating the principles of how rendering works  Replacing it with hooks did the job   const  showTooltip  setShowTooltip     React useState lt boolean gt  false

User · Answer

When create React components from functions and useState   const  drawerState  setDrawerState    useState false    const toggleDrawer        gt             attempting to trigger re-render       setDrawerState  drawerState        This does not work            lt Drawer             drawerState  drawerState              toggleDrawer  toggleDrawer             gt    This does work  adding key             lt Drawer             drawerState  drawerState              key  drawerState              toggleDrawer  toggleDrawer             gt

User · Answer

Because children do not rerender if the props of the parent change  but if its STATE changes     What you are showing is this  https   facebook github io react tips communicate-between-components html  It will pass data from parent to child through props but there is no rerender logic there   You need to set some state to the parent then rerender the child on parent change state  This could help   https   facebook github io react tips expose-component-functions html

User · Answer

I had the same problem  This is my solution  I m not sure that is the good practice  tell me if not   state       value  this props value     componentDidUpdate prevProps      if prevProps value     this props value        this setState  value  this props value            UPD  Now you can do the same thing using React Hooks   only if component is a function   const  value  setValue    useState propName      This will launch only if propName value has chaged  useEffect      gt    setValue propName      propName

User · Answer

Confirmed  adding a Key works  I went through the docs to try and understand why   React wants to be efficient when creating child components  It won t render a new component if it s the same as another child  which makes the page load faster   Adding a Key forces React to render a new component  thus resetting State for that new component   https   reactjs org docs reconciliation html recursing-on-children

User · Answer

export default function DataTable   col  row        const  datatable  setDatatable    React useState        useEffect      gt        setDatatable         columns  col        rows  row                do any thing else        row       return        lt MDBDataTableV5       hover       entriesOptions   5  20  25         entries  5        pagesAmount  4        data  datatable        gt          this example use useEffect to change state when props change

User · Answer

According to React philosophy component can t change its props  they should be received from the parent and should be immutable  Only parent can change the props of its children   nice explanation on state vs props  also  read this thread Why can t I update props in react js

User · Answer

define changed props in mapStateToProps of connect method in child component   function mapStateToProps state      return       chanelList  state messaging chanelList          export default connect mapStateToProps  ChannelItem     In my case  channelList s channel is updated so I added chanelList in mapStateToProps

[javascript] React: why child component doesn't update when prop changes

Examples related to javascript

Examples related to html

Examples related to reactjs