update state of the parent screen if an update occurs in current screen

Question

I am using react-navigation 6 and react-native CLI, to make a chat application. I want to achieve this feature which is common in every chat application that when we send a message to someone, and go back to homescreen of the app (where all conversations are listed), the last message sent, can be seen.

Like if I sent message and pressed the back button, it will navigate me to home screen where all my conversations are, and it should update the conversation where I sent the message.

I have tried route.params, but it gives a warning that non-serializable values found.

React navigation warning

Also, I have heard that passing setState function to child component is very bad practice as it is mentioned here

I also tried navigation_events along with useEffect , this was a surprise to me that it didn't work either. When I refresh the screen manually, or logout and log in, then it refreshes completely, but doesn't when I go back from application.

React.useEffect(() => {
    navigation.addListener('focus', e => {
      fetchConvos();
    });
    return () => {};
  }, []); //also tried [navigation] instead of []

const fetchConvos = () => {
    fetch('http://localhost:15000/' + id + '/conversations', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      redirect: 'follow',
      referrerPolicy: 'no-referrer',
    })
      .then(res => res.json())
      .then(received => {
        if (received?.response !== false) {
          setConversations(received);
        }
      });
  };

I have checked the id , received and even setConversations, they all are updating, but my screen still rendering the old messages.

Also, I don't want to use Async Storage or redux for this simple problem like this.

I can share the complete code if this isn't enough.

EDIT I figured out one more way to update it may help clarify the situation more.

React.useEffect(() => {
    navigation.addListener('focus', e => {
      setConversations([]); //first setting convos to empty
      fetchConvos(); //then fetching new data
    });
    return () => {};
  }, []);

But this method is quite slow as I am updating the state of conversations twice.

I would appreciate if someone can help me here.

score 1 · Accepted Answer · answered Dec 18 '21 at 00:01

By taking the last 2 samples of code, I'd go down the route of setting the state to change the data. Like, I don't know the structure of your code completely. But i'm assuming you're using useEffect inside some component, right? In that case, React Context might be what you're looking for: How to use react hooks on react-native with react-navigation

It allows to share informations, without having to build a structured store like redux. You should probably working on redesign a bit the code as, if you're following the current logic, you're going to split data pool of the conversation in the menu and load them when the "back" navigation event occurs, right? Whilst the conversation data should be shared and available to both components, regardless where you're. At least I'd rethink it this way to allow consistent data throughout the whole application. Unless you've to do something specific and on-spot, of course.

The answer in the [link](https://stackoverflow.com/questions/61984106/how-to-use-react-hooks-on-react-native-with-react-navigation) worked for me<3 , however , yes I found out that I was taking things more advanced for a simple task. Thankyou — Daniyal Shaikh, Dec 18 '21 at 23:50

update state of the parent screen if an update occurs in current screen

1 Answers1