StateLess dan StateFull Component (React JS Part II)

Bismillah, Kali ini kita akan ke pembahasan baru yaitu belajar react js. Postingan ini saya tulis sebagai dokumentasi pembelajaran saya di react js. Jadi, apa yang saya tulis disini adalah hasil dari kesimpulan yang saya tangkap selama pembelajaran react js ini. Kalau ada kekurangan mohon dimaklumi. Ok langsung saja sesuai tema untuk part I kali ini kita akan bahas mengenai stateless dan statefull component.

Seperti kita ketahui dalam react js selalu ada namanya komponen, komponen ini merupakan yang terpenting dalam react js, karena setiap elemen html dapat dibuat sebagai komponent. baca selengkapnya di pembahasan saya sebelumnya apa itu component .

Nah, kalau kalian sudah tau apa itu komponen dalam react js, Sekarang kita harus tau ternyata dalam membuat komponen di react js mempunyai dua cara yaitu stateless component / functional component dan statefull component / class component. Keduanya mempunyai perbedaan. keduanya memiliki kelebihan dan kekurangan masing-masing.

Stateless component / functional component

seperti namanya functional component berarti component ini selalu dibuat seperti sebuah fungsi pada umumnya. Sekarang coba buka project sebelumnya dan masuk ke file index.js kemudian tambahkan kode seperti pada gambar berikut.

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
const StateLess = ()=> {
     return <p>Hello ini Stateless</p>
}
ReactDOM.render(<StateLess />, document.getElementById(‘root’));

 Statefull component / class component

Berbeda dengan functional component di statefull / class component ini untuk membuat component itu harus membentuk sebuah class dimana dia mengextends / mengambil turunan (pelajari OOP) dari class react component, dan untuk mengeluarkan nilai maka di cara ini harus menggunakan render sebelum mereturn htmlnya. contohnya sendiri sudah digunakan dalam default App.js reactnya.

import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
class App extends Component {
    render() {
       return (
          <div className=”App”>
             <header className=”App-header”>
                  <img src={logo} className=”App-logo” alt=”logo” />
                  <p> Edit <code>src/App.js</code> and save to reload.</p>
                  <a className=”App-link” href=”https://reactjs.org” target=”_blank”                                rel=”noopener noreferrer” >LearnReact</a>
             </header>
        </div>
      );
   }
}
export default App;

Tentu hasil dari script diatas ketika dijalankan adalah default dari tampilan react js ketika baru di pasang.

Nah, sekarang perbedaan dari keduanya apa sih? Perbedaannya sudah sangat jelas sekali bahwa kita bisa lebih memanajemen component yang kita miliki ketika kita menggunakan statefull / class component karena dengan class kita bisa membuat properti dan method lagi, sedangkan dalam functional/stateless dia hanya bertindak seperti function pada umumnya. jadi nanti bakalan banyak fungsi-fungsi diluar yang akan kita panggil didalam functional component tersebut. Jadi, saya sarankan kalau untuk membuat component yang sangat banyak maka disarankan menggunakan statefull dan kalau hanya sekedar component yang kira-kira tidak membutuhkan banyak tambahan atau cuman menjalan perintah yang sederhana cukuplah menggunakan stateless.

Ok, mungkin itu saja mengenai stateless dan statefull component yang saya ketahui, kalau ada yang kurang jelas silahkan ditanyakan di kolom komentar, saya dengan senang hati akan menjawabnya. Pada pembahasan selanjutnya kita akan bahas mengenai props. sekian.

Leave a Reply

Your email address will not be published.