How to force a component to reload or refresh after changing some properties

Question

I have the following component:

import { useBodyCreateUser } from "../jotai/bodyCreateUser";

const Header = ({
  noVerify,
  name,
  processed,
  OnProcessed,

}: any) => (
  <View style={styles.container}>
    <View style={styles.controls}>
      <HorizontalSpacer />
      <Text style={{ ...styles.textForm }}>NAME</Text>
      <Text style={styles.textInput}>{name}</Text>

      {noVerify ? (
        <View style={{ width: "100%" }}>
          
          {processed == false && (
            <GreenButtonText onPress={OnProcessed}>
              <Text style={stylesButtons.text}>Set to Processed</Text>
            </GreenButtonText>
          )}

        </View>
      ) : (
        <View style={{ width: "100%", paddingTop: "45%" }}>
          // ** other code here ** //
        </View>
      )}

  </View>
);

export default function Settings({ navigation }: RootTabScreenProps<any>) {

const [getBody, setBodyCreateUser] = useBodyCreateUser();
const [verify, setVerify] = React.useState(false);

return (

 <SafeAreaView style={styles.container}>

<Header
            noVerify={verify}
            name={name}
            
            processed={getBody.processed}
            OnProcessed={() => {
             
                  getBody.processed = true;
                  setBodyCreateUser(getBody);
                  // update local storage
                  AsyncStorage.setItem("appstate", JSON.stringify(getBody));
              
            }} 
           
          />

 </SafeAreaView>

);

};

When I click the button "Set to Processed" I need the button to hide. It works when I go back to the previous screen after I set it to processed and then enter it again into the view. But in the same view when the OnProcessed event happens the button still there?

I don't know if there is a way to reload or refresh the Header component, but I thought that by just setting the property processed to true that will reflect the change but is not.

Any clue?

Does this answer your question? [How can I force a component to re-render with hooks in React?](https://stackoverflow.com/questions/53215285/how-can-i-force-a-component-to-re-render-with-hooks-in-react) — Thanhal P A, Nov 13 '22 at 14:04
Yes that seems the answer, but Im lost on how to implemented in my code. Help please :) — VAAA, Nov 13 '22 at 14:29

score 2 · Answer 1 · answered Nov 13 '22 at 20:11

Try this work around:

import { useBodyCreateUser } from "../jotai/bodyCreateUser";

const Header = ({
  noVerify,
  name,
  processed,
  OnProcessed,
  refresh,

}: any) => (
  <View style={styles.container}>
    <View style={styles.controls}>
      <HorizontalSpacer />
      <Text style={{ ...styles.textForm }}>NAME</Text>
      <Text style={styles.textInput}>{name}</Text>

      {noVerify ? (
        <View style={{ width: "100%" }}>
          
          {processed == false && !refresh && (
            <GreenButtonText onPress={OnProcessed}>
              <Text style={stylesButtons.text}>Set to Processed</Text>
            </GreenButtonText>
          )}

        </View>
      ) : (
        <View style={{ width: "100%", paddingTop: "45%" }}>
          // ** other code here ** //
        </View>
      )}

  </View>
);

export default function Settings({ navigation }: RootTabScreenProps<any>) {

const [getBody, setBodyCreateUser] = useBodyCreateUser();
const [verify, setVerify] = React.useState(false);
const [refresh, setRefresh] = React.useState(false);

return (

 <SafeAreaView style={styles.container}>

<Header
            noVerify={verify}
            name={name}
            
            processed={getBody.processed}
            refresh={refresh}
            OnProcessed={() => {
             
                  getBody.processed = true;
                  setBodyCreateUser(getBody);
                  // update local storage
                  AsyncStorage.setItem("appstate", JSON.stringify(getBody));
                  setRefresh(true);
              
            }} 
           
          />

 </SafeAreaView>

);

I think because you're trying to listen to a data that has changed inside an object, the component won't re-render as the main object didn't change.

So I added the "refresh" state to make sure the component re-render.

How to force a component to reload or refresh after changing some properties

1 Answers1