ahmadajah03 Mon Dec 2020 1 year ago

Cara Refresh / Reload Component dan Halaman di React

Pada artikel ini, saya akan membagikan cara memuat ulang komponen dan halaman di React.js. Mari kita mulai:

Table of Contents

Untuk refresh halaman, Anda tidak perlu react-router. Kami ingin memuat ulang halaman dengan mengklik sebuah tombol. Berikut contohnya:

Reload Page

App.js

import React from 'react';

function App() {
  
  function refreshPage() {
    window.location.reload();
  }
  
  return (
    <div>
      <button onClick={ refreshPage }>Refresh!</button>
    </div>
  );
}

export default App;

Refresh Component

Dengan menggunakan metode this.setState(), kami hanya dapat refresh komponen:

MyComponent.js

import React from "react";

class MyComponent extends React.Component {

    refresh = () => {
      // re-renders the component
      this.setState({});
    };
  
    render() {
      return (
        <div>
          <button onClick={ this.refresh }>Refresh Component</button>
        </div>
      );
    }
  }
  
  export default MyComponent;

Dengan menggunakan useState() react hook, kita juga bisa memuat ulang sebuah komponen:

MyComponent.js

import React, { useState } from 'react';

function MyComponent() {

    const [value, setValue] = useState();

    const refresh = ()=>{
        // re-renders the component
        setValue({});
    }
  
    return (
      <div>
        <button onClick={ refresh }>Refresh Component</button>
      </div>
    );
  }
  
  export default MyComponent;

Itu dia. Terima kasih sudah membaca.🙂

refresh page in react js reload component in react js