Re-render Child Compondents React

Question

Is it possible to re-render one or both of a component's children if one of them updates? I have a component that looks like this:

const ContributeBody = () => (
  <StyledContributeBody>
    <LastThreePages />
    <ContributeForm />
  </StyledContributeBody>
);

The ContributeForm component collects data and calls an API function that adds data to my Fauna DB Collection.

The LastThreePages component calls an API function that gets the last three pages from the Fauna DB Collection.

At present, it is necessary to hard reload the page to order to update LastThreePages.

I am looking for a way to reload LastThreePages after ContributeForm submits the data to the data to the Fauna DB Collection.

Currently, I am not using Redux or GraphQL. I am using FQL.

Is is a flux pattern the answer here?

Answer 1

As far as I know, react re-renders component when it's state or property changes. I guess passing some dummy property around would work (I didn't test this):

const ContributeBody = () => (
  const [rev, setRev] = useState((new Date()).valueOf());

  <StyledContributeBody>
    <LastThreePages rev={rev} />
    <ContributeForm onSuccess={() => {setRev((new Date()).valueOf());}} />
  </StyledContributeBody>
);

Call onSuccess when need to re-render