Post Categories

Engineering

A Better Way Of React With Hooks | Part 1

BY

Isna

|

Apa Itu Hooks ?

Hooks adalah feature baru di React sejak release versi 16.8 dengan Hooks tidak perlu definisi class untuk membuat state?

Sesuai dengan apa yang dijelaskan oleh Dan Abramov di React Conf 2018, React Conf 2018 dengan Hooks membuat banyak perubahan code di React yang membuat komponen lebih mudah untuk dibaca dan mempunyai lifecycle yang lebih mudah untuk dipahami, berikut contoh kecil untuk deklarasi state dengan dan sebelum menggunakan Hooks.

Implementasi State Dengan Hooks

Perbedaan deklarasi state dengan dan tanpa React Hooks:

    class Example extends Component {

    state = {
      hello: "class"
    }

    handleChange = ({target:{name, value}}) => {
      this.setState({[name]:value})
    }

    render() {
      const {hello} = this.state

      return (
{hello}

      )
    }
  }
 function Example() {
    const [hello, setHello] = useState('hooks')

    const handleChange = ({ target: { value }}) => {
      setHello(value)
    }

    return(
{hello}

    )
  }

Dari dua implementasi di atas dari segi line of code implementasi dengan React Hooks mempunyai lebih sedikit kode untuk ditulis dan untuk segi pembacaan kodenya lebih mudah.

Dalam Hooks pendeklarasian state tidak perlu lagi menggunakan this.state melainkan langsung memanggil nama variabel yang dibuat dan tidak perlu melakukan destructuring state untuk memudahkan pemanggilan state karena dalam deklarasi awalnya sudah dilakukan destructuring sebelumnya.

  // deklarasi state dalam class component
  state = {
    hello: 'class'
  }

  //destructuring state untuk kemudahan pengaksesan state
  const {hello} = this.state

  //pemanggilan state dalam render
{hello}
  
  //deklarasi state dengan hooks
  const [hello, setHello] = useState('hooks')

  //pemanggilan state dalam hooks
{hello}
  

Sedangkan dalam implementasi function masih sama namun hanya tidak adanya penulisan ulang this di dalam Hooks.

  //deklarasi function dalam class component
  handleChange = ({target:{name, value}}) => {
      this.setState({[name]:value})
  }

  // pemanggilan function dalam class component
  
  //deklarasi function dalam functional component
  const handleChange = ({target: {value}}) => {
    setHello(value)
  } 

  //pemanggilan function dalam functional component
  

Selanjutnya akan dibahas tentang function Hooks yang lainnya, seperti useReduceruseEffectuseContext, mengubah kode dari class component menggunakan hooks, dan cara membuat custom Hooks dan untuk additional ada tambahan useCallbackuseMemouseRefuseImperativeHandleuseLayoutEffectuseDebugValue.

Here the codesandbox of this code

Reference

Hubungkan dengan kami

Ikuti refactory

Artikel Populer


( ! ) Deprecated: jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead. in /apps/refactory-portal/wp-includes/functions.php on line 5049
Call Stack
#TimeMemoryFunctionLocation
10.0001401608{main}( ).../index.php:0
20.0002401880require( '/apps/refactory-portal/wp-blog-header.php ).../index.php:17
30.464215068304require_once( '/apps/refactory-portal/wp-includes/template-loader.php ).../wp-blog-header.php:19
40.478315151344include( '/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/templates/header-footer.php ).../template-loader.php:106
50.612320431376Elementor\Modules\PageTemplates\Module->print_content( ).../header-footer.php:19
60.612320431752call_user_func:{/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/module.php:207}( $function_name = [0 => class Elementor\Modules\PageTemplates\Module { protected $print_callback = ...; private ${Elementor\Core\Base\Module}reflection = NULL; private ${Elementor\Core\Base\Module}components = [...]; private ${Elementor\Core\Base\Base_Object}settings = NULL }, 1 => 'print_callback'] ).../module.php:207
70.612420431832Elementor\Modules\PageTemplates\Module->print_callback( ).../module.php:207
80.612720432584the_content( $more_link_text = ???, $strip_teaser = ??? ).../module.php:190
90.612820432608apply_filters( $tag = 'the_content', $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i' ).../post-template.php:253
100.612820433008WP_Hook->apply_filters( $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i', $args = [0 => '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i'] ).../plugin.php:212
110.613220436008Elementor\Frontend->apply_builder_in_content( $content = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i' ).../class-wp-hook.php:287
120.613220436384Elementor\Frontend->get_builder_content( $post_id = 5196, $with_css = ??? ).../frontend.php:898
130.613820698416Elementor\Core\DocumentTypes\Post->print_elements_with_wrapper( $elements_data = [0 => ['id' => '7d42ed0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '1350d911', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '4af67aa6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '25797630', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '4c0052cf', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../frontend.php:984
140.619420864712Elementor\Core\DocumentTypes\Post->print_elements( $elements_data = [0 => ['id' => '7d42ed0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '1350d911', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '4af67aa6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '25797630', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '4c0052cf', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../document.php:933
150.689622833800Elementor\Element_Section->print_element( ).../document.php:1296
160.694322943656Elementor\Element_Section->print_content( ).../element-base.php:650
170.800524920976Elementor\Element_Column->print_element( ).../element-base.php:907
180.804725022560Elementor\Element_Column->print_content( ).../element-base.php:650
190.875226968752Elementor\Element_Section->print_element( ).../element-base.php:907
200.879327078608Elementor\Element_Section->print_content( ).../element-base.php:650
210.879327080064Elementor\Element_Column->print_element( ).../element-base.php:907
220.883127181648Elementor\Element_Column->print_content( ).../element-base.php:650
230.888727309480OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->print_element( ).../element-base.php:907
241.057032190272OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->enqueue_scripts( ).../element-base.php:682
251.057132190648Elementor\Utils::handle_deprecation( $item = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper' ).../element-base.php:152
261.057132191512_deprecated_file( $file = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper', $message = ??? ).../utils.php:487
271.057132192584trigger_error( $message = 'jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead.', $error_type = 16384 ).../functions.php:5049

Case Studies


( ! ) Deprecated: jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead. in /apps/refactory-portal/wp-includes/functions.php on line 5049
Call Stack
#TimeMemoryFunctionLocation
10.0001401608{main}( ).../index.php:0
20.0002401880require( '/apps/refactory-portal/wp-blog-header.php ).../index.php:17
30.464215068304require_once( '/apps/refactory-portal/wp-includes/template-loader.php ).../wp-blog-header.php:19
40.478315151344include( '/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/templates/header-footer.php ).../template-loader.php:106
50.612320431376Elementor\Modules\PageTemplates\Module->print_content( ).../header-footer.php:19
60.612320431752call_user_func:{/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/module.php:207}( $function_name = [0 => class Elementor\Modules\PageTemplates\Module { protected $print_callback = ...; private ${Elementor\Core\Base\Module}reflection = NULL; private ${Elementor\Core\Base\Module}components = [...]; private ${Elementor\Core\Base\Base_Object}settings = NULL }, 1 => 'print_callback'] ).../module.php:207
70.612420431832Elementor\Modules\PageTemplates\Module->print_callback( ).../module.php:207
80.612720432584the_content( $more_link_text = ???, $strip_teaser = ??? ).../module.php:190
90.612820432608apply_filters( $tag = 'the_content', $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i' ).../post-template.php:253
100.612820433008WP_Hook->apply_filters( $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i', $args = [0 => '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i'] ).../plugin.php:212
110.613220436008Elementor\Frontend->apply_builder_in_content( $content = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i' ).../class-wp-hook.php:287
120.613220436384Elementor\Frontend->get_builder_content( $post_id = 5196, $with_css = ??? ).../frontend.php:898
130.613820698416Elementor\Core\DocumentTypes\Post->print_elements_with_wrapper( $elements_data = [0 => ['id' => '7d42ed0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '1350d911', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '4af67aa6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '25797630', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '4c0052cf', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../frontend.php:984
140.619420864712Elementor\Core\DocumentTypes\Post->print_elements( $elements_data = [0 => ['id' => '7d42ed0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '1350d911', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '4af67aa6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '25797630', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '4c0052cf', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../document.php:933
150.689622833800Elementor\Element_Section->print_element( ).../document.php:1296
160.694322943656Elementor\Element_Section->print_content( ).../element-base.php:650
170.800524920976Elementor\Element_Column->print_element( ).../element-base.php:907
180.804725022560Elementor\Element_Column->print_content( ).../element-base.php:650
191.085032527280Elementor\Element_Section->print_element( ).../element-base.php:907
201.092832637136Elementor\Element_Section->print_content( ).../element-base.php:650
211.093032638592Elementor\Element_Column->print_element( ).../element-base.php:907
221.099732740176Elementor\Element_Column->print_content( ).../element-base.php:650
231.110532868496LivemeshAddons\Widgets\LAE_Posts_Carousel_Widget->print_element( ).../element-base.php:907
241.222133877936LivemeshAddons\Widgets\LAE_Posts_Carousel_Widget->enqueue_scripts( ).../element-base.php:682
251.222133877936Elementor\Utils::handle_deprecation( $item = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper' ).../element-base.php:152
261.222233878800_deprecated_file( $file = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper', $message = ??? ).../utils.php:487
271.222233879120trigger_error( $message = 'jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead.', $error_type = 16384 ).../functions.php:5049
Tag
Artikel Terkait
Lihat lebih banyak artikel bagus dari kategori ini!

( ! ) Deprecated: jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead. in /apps/refactory-portal/wp-includes/functions.php on line 5049
Call Stack
#TimeMemoryFunctionLocation
10.0001401608{main}( ).../index.php:0
20.0002401880require( '/apps/refactory-portal/wp-blog-header.php ).../index.php:17
30.464215068304require_once( '/apps/refactory-portal/wp-includes/template-loader.php ).../wp-blog-header.php:19
40.478315151344include( '/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/templates/header-footer.php ).../template-loader.php:106
50.612320431376Elementor\Modules\PageTemplates\Module->print_content( ).../header-footer.php:19
60.612320431752call_user_func:{/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/module.php:207}( $function_name = [0 => class Elementor\Modules\PageTemplates\Module { protected $print_callback = ...; private ${Elementor\Core\Base\Module}reflection = NULL; private ${Elementor\Core\Base\Module}components = [...]; private ${Elementor\Core\Base\Base_Object}settings = NULL }, 1 => 'print_callback'] ).../module.php:207
70.612420431832Elementor\Modules\PageTemplates\Module->print_callback( ).../module.php:207
80.612720432584the_content( $more_link_text = ???, $strip_teaser = ??? ).../module.php:190
90.612820432608apply_filters( $tag = 'the_content', $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i' ).../post-template.php:253
100.612820433008WP_Hook->apply_filters( $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i', $args = [0 => '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i'] ).../plugin.php:212
110.613220436008Elementor\Frontend->apply_builder_in_content( $content = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><li id="menu-item-3571"data-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<li id="menu-item-3024"data-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<li id="menu-item-3025"data-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<li id="menu-item-3022"data-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<li id="menu-i' ).../class-wp-hook.php:287
120.613220436384Elementor\Frontend->get_builder_content( $post_id = 5196, $with_css = ??? ).../frontend.php:898
130.613820698416Elementor\Core\DocumentTypes\Post->print_elements_with_wrapper( $elements_data = [0 => ['id' => '7d42ed0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '1350d911', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '4af67aa6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '25797630', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '4c0052cf', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../frontend.php:984
140.619420864712Elementor\Core\DocumentTypes\Post->print_elements( $elements_data = [0 => ['id' => '7d42ed0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '1350d911', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '4af67aa6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '25797630', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '4c0052cf', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../document.php:933
151.285529554280Elementor\Element_Section->print_element( ).../document.php:1296
161.290229664136Elementor\Element_Section->print_content( ).../element-base.php:650
171.290229665592Elementor\Element_Column->print_element( ).../element-base.php:907
181.294529767176Elementor\Element_Column->print_content( ).../element-base.php:650
191.328230431224OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->print_element( ).../element-base.php:907
201.384931310864OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->enqueue_scripts( ).../element-base.php:682
211.384931311240Elementor\Utils::handle_deprecation( $item = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper' ).../element-base.php:152
221.384931312104_deprecated_file( $file = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper', $message = ??? ).../utils.php:487
231.384931312424trigger_error( $message = 'jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead.', $error_type = 16384 ).../functions.php:5049
×