Cara Memaksa Memperbarui Komponen Bereaksi

Pengantar

Dalam artikel ini kami akan menunjukkan cara memaksa memperbarui komponen di React.js. Lebih khusus lagi, kami akan memberikan pengantar singkat untuk React Re-renders, kami akan menunjukkan cara memaksa pembaruan dalam komponen berbasis kelas, dan cara memaksa pembaruan dalam komponen fungsional.

React Re-Render

React sendiri secara otomatis menangani komponen rendering ulang untuk Anda, dalam banyak kasus. Penyebabnya dapat didasarkan pada kapan props atau state telah diperbarui. Jadi ketika keadaan atau properti berubah, komponen dirender ulang. Tetapi bagaimana jika komponen Anda bergantung pada sesuatu yang lain dan belum tentu pada negara bagian atau properti Anda? Dalam hal ini Anda mungkin perlu memperbarui komponen secara paksa karena React mungkin tidak mendeteksi perubahan.

Mari kita lihat bagaimana menggunakan pembaruan paksa ini pada komponen React. Untuk menunjukkan ini, kita akan membuat aplikasi sederhana untuk tujuan demo.

Note: Kita akan membahas beberapa konsep React, jadi disarankan untuk memiliki pengetahuan dasar tentang React.

Memaksa Pembaruan pada Komponen Berbasis Kelas

Komponen kelas memiliki metode bawaan untuk merender ulang komponen, yang disebut forceUpdate(), yang digunakan untuk memaksa komponen untuk dirender ulang. Anda dapat membaca lebih lanjut tentang forceUpdate() metode pada React's situs resmi.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Note: Tidak disarankan untuk mengandalkan pembaruan komponen menggunakan forceUpdate() metode. Ketika Anda membutuhkan metode ini, Anda harus terlebih dahulu mencoba menganalisis kode Anda dan mencari tahu apakah ada alasan lain mengapa React tidak memperbarui komponen. Anda mungkin menemukan bahwa ada bug yang menyebabkan hal ini atau Anda dapat merestrukturisasi kode Anda dengan cara yang memungkinkan React untuk merender ulang komponen itu sendiri dengan benar.

Berikut adalah contoh cara memaksa pembaruan pada komponen berbasis kelas:

import React from 'react'

class App extends React.Component {
    constructor() {
        super();
        this.handleForceupdateMethod = this.handleForceupdateMethod.bind(this);
    };

    handleForceupdateMethod() {
        this.forceUpdate();
    };

    render() {
        return (
            <div>
                <h1>Hello StackAbuse</h1>
                <h3>Random Number: { Math.random() }</h3>
                <button onClick={this.handleForceupdateMethod}>
                    Force re-render
                </button>
            </div>
        );
    }
}

export default App

Ada lebih banyak hal yang terjadi dalam metode ini daripada yang terlihat. Misalnya, menelepon forceUpdate() memicu metode siklus hidup untuk komponen anak juga. Dan seperti yang kita ketahui dengan React, itu akan memperbarui DOM hanya jika markup benar-benar berubah.

Anda bisa mengakses kode langsung di sini.

Memaksa Pembaruan pada Komponen Fungsional

Komponen fungsional tidak memiliki metode bawaan untuk merender ulang komponen seperti yang dilakukan oleh rekan berbasis kelasnya. Ini berarti bahwa kita tidak memiliki forceUpdate() metode yang tersedia untuk kita. Namun, ingatlah bahwa dalam React komponen biasanya dirender ulang karena perubahan state atau prop. Dengan menggunakan ini, kita dapat mencapai cara untuk memaksa upate.

Pada v16.8+, React memiliki konsep yang disebut Hooks yang dapat digunakan dalam komponen fungsional untuk memperbarui status, melakukan efek samping, dll. Kami akan menggunakan kait ini untuk keuntungan kami dalam mendapatkan komponen untuk dirender ulang.

Berikut adalah beberapa contoh cara memaksa pembaruan dalam komponen fungsional:

Menggunakan useReducer kait

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
    forceUpdate();
}

Peredam di React biasanya digunakan ketika Anda memiliki logika dan tindakan status yang kompleks. Di sini kami menggunakannya hanya untuk memicu pembaruan dengan memperbarui variabel status dummy, x. Status harus benar-benar berubah untuk memicu pembaruan, itulah sebabnya statusnya bertambah pada setiap panggilan.

Gunakan useState kait

import React, { useState } from "react";


function useForceUpdate() {
    let [value, setState] = useState(true);
    return () => setState(!value);
}

export default function App() {
    
    const handleForceupdateMethod = useForceUpdate();

    return (
        <div className="App">
            <h1>Hello StackAbuse </h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

Gagasan di balik jenis pembaruan kekuatan ini sangat mirip dengan useReducer karena kami terus memperbarui status untuk memaksa perubahan. Alih-alih menambah penghitung, seperti yang kita lakukan pada metode terakhir, di sini kita cukup mengganti nilai boolean sehingga dinegasikan pada setiap panggilan.

Menggunakan useState dan useCallback kait

import React, { useState , useCallback} from "react";

export default function App() {
    const [, updateState] = useState();
    const handleForceupdateMethod = useCallback(() => updateState({}), []);

    
    console.log("Rendering...");

    return (
        <div className="App">
            <h1>Hello StackAbuse</h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

Sekali lagi, strategi ini bekerja dengan mengubah keadaan. Dalam hal ini, meskipun secara teknis kami tidak mengubah nilai negara, kita adalah mengirimkannya objek baru, yang dianggap baru oleh React karena tidak melakukan pemeriksaan kesetaraan "dalam" pada status.

Seperti yang Anda lihat, ada beberapa cara untuk mencapai hal yang sama di sini. Ingatlah bahwa ini semua secara teknis anti-pola dan harus dihindari jika memungkinkan. Tetapi jika Anda tidak dapat menyelesaikan masalah mendasar dan perlu memperbarui komponen secara paksa, maka salah satu metode yang kami tunjukkan di sini akan berfungsi.

Kesimpulan

Dalam artikel ini kita telah melihat bagaimana memaksa pembaruan pada komponen React. Kami juga melihat bagaimana hal ini dapat dicapai dalam komponen fungsional dan berbasis kelas. Meskipun belum tentu merupakan praktik yang baik, akan berguna untuk memahami cara kerjanya jika kita perlu menggunakannya dalam kasus khusus.