react.js React.UseEffect only rendered once upon page load but not when prop changes-CodePudding

I am trying to update my component everytime the prop changes:

export default function ChatMessages(props) {
  const [chatRooms, setChatRooms] = React.useState([]);
  React.useEffect(() => {
    (async () => {
      var x = await GetMessages(props.statePassDown);
      console.log(x);
      setChatRooms(x);
    })();
  }, []);

  return (
    <div class="mainChatView">
      <div>{props.statePassDown}</div>
      {chatRooms.map((chatRoom, index) => {
        return (
          <ul>
            <li key={index}>
              <table>
                <tr>
                  <td>
                    chatID: {chatRoom.chatID}
                    <br></br>
                    message: {chatRoom.message}
                  </td>
                </tr>
              </table>
            </li>
          </ul>
        );
      })}
    </div>
  );
}

But unfortunatley, this code is only ever called once. I can see that the prop changes through this div:

<div>{props.statePassDown}</div>

This line rerenderes everytime a button is pressed inside another component, but the whole mapping function isnt.

How can I alter my code that it responds to the change in props.statePassDown?

CodePudding user response：

You're explicitly setting the effect to have no dependencies:

React.useEffect(()=>{
  // ...
}, []);  // <-- empty dependencies

That means it will only ever be executed on component mount. (If you don't pass any dependency array, then the effect is executed after each component update.)

Change the dependencies to have the effect be executed when those values change.

React.useEffect(()=>{
  // ...
}, [props.statePassDown]);

CodePudding user response：

export default function ChatMessages(props) {

const [chatRooms, setChatRooms] = React.useState([]);
React.useEffect(()=>{
  (async () => {
      var x = await GetMessages(props.statePassDown)
      console.log(x)
      setChatRooms(x)
  })()
},[props.statePassDown])  // pass what you are trying to watch change 
...
// ... here in the dependency array

CodePudding user response：

Also, a good thing to note about the useEffect hook is that the return statement inside of a useEffect hook will trigger on the component did unmount lifecycle. ex.

useEffect(() => {
  // ... on component mount

  return () => {
    // ... component did unmount 
  }
}, [/* dependency array */]);