How to reload a component (part of page) in reactjs?

The easiest way I have found out is to set a seed state, and use that in the key attribute of the rendered component. Whenever the seed changes now the component will be reloaded.

       const [seed, setSeed] = useState(1);
       const reset = () => {
            setSeed(Math.random());
        }
       <Component key={seed}/>
       <Button onClick={reset}>Reset</Button>

Whenever the Reload button is pressed now the component I need will be rerendered.

If you just want to reload the component's data, use the useEffect Hook:

useEffect(() => {
    fetchData();
}, [data]);
// fetchData() is called whenever data is updated.

You can trigger a reload of components by updating the state.

class YourComponent extends Component {
  state = {
    reload: false
  };

  refreshPage = () => {
    this.setState(
      {reload: true},
      () => this.setState({reload: false})
    )
  }
}

This is dirty, but it may work. I have not tested it, though.

If you'd like to use "hard reload" (remove component and recreate it) instead of forcing child components to just re-render themselves but of course without page reloading, I prepared reload hook:

export function useReload(): [() => void, boolean] {
    const [reloading, setReloading] = useState(false);
    const reload = useCallback(() => {
        setReloading(true);
    }, [setReloading]);

    useEffect(() => {
        if (reloading) {
            setReloading(false);
        }
    }, [reloading, setReloading]);

    return [reload, reloading];
}

Usage of it is simple and clean:

const [reload, reloading] = useReload();

return <>
    <button onClick={reload}>reload component below</button>
    {reloading ? null : <ComponentToReload />}
</>;

You can create a new function. And you can call it on componentDidMount and refreshPage.

exampleFunction = () => {
   /** Do your job here */
}

componentDidMount(){
   /** your code */
   this.exampleFunction ();
   /** your code */
}

refreshPage(){
   this.exampleFunction ();
}

refreshPage() {
  window.location.reload(false);
}

Reference at here: https://upmostly.com/tutorials/how-to-refresh-a-page-or-component-in-react

If you want render your component then you can update any state using this.setState({}) in your function.

window.location.reload(); will reload the current document, it like the Refresh button in browser, and it will not make any partial re rendering like AJAX. To achieve this by make setState in react.

Below the working sample :

import React from "react";

class RefreshComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = { name: "React Component reload sample" };
}
 submit() {
   this.setState({ name: "React Component Updated - " + new Date() });
}
render() {
  return (
    <div>
      {this.state.name}
      <br />
      <button
       onClick={() => {
         this.submit();
       }}
     >
       Submit
     </button>
    </div>
  );
 }
}

export default RefreshComponent;

The most maintainable way is to reactor existing components to handle "reload" in consistent way. ideally components should get data though props/context/redux instead of loading that on their own. This way you can refresh all with single call. Say it may be redux with some action like "REFRESH_HOTELS" or separate context with method reload.

as a last resort you may update key prop(to any other value, maybe just random string) and whole branch will be recreated including call to componentDidMount. it's know as "reset state by key prop" technique. but it's neither performance-safe nor really flexible way. better to avoid that until you really don't care of maintainability(or use as temporary solution... but typically "temporary solutions" stays as long as app exists)

You can check out this other thread: Can you force a React component to rerender without calling setState?

This is the top answer:

In class components, you can call this.forceUpdate() to force a rerender.

Documentation: https://facebook.github.io/react/docs/component-api.html

In function components, there's no equivalent of forceUpdate, but you can contrive a way to force updates with the useState hook.

I had the same problem and every time I tried to reloaded my component, It would just turn into a non-stop reloading loop. here's how I fixed it, hope it works for you:

useEffect(() => {
 // Get the reloaded value from localStorage
 const storedValue = localStorage.getItem("reloadWindow");

// Check if storedValue is null or undefined or 0
 if (
   storedValue === null ||
   storedValue === undefined ||
   storedValue === "0" // this is because I had set to 0 when i logged out
 ) {
      window.location.reload();
      // Set the value in localStorage
      localStorage.setItem("reloadWindow", JSON.stringify(1));
 }
}, []);

you just need to do in useEffect

if you have data in useState

let [data, setData] = useState([]);

whenever the data has changes, it automatically reload the component

useEffect(()=>{
   
     },[data])