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.0002401504{main}( ).../index.php:0
20.0003401776require( '/apps/refactory-portal/wp-blog-header.php ).../index.php:17
31.962615061344require_once( '/apps/refactory-portal/wp-includes/template-loader.php ).../wp-blog-header.php:19
41.974915295936include( '/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/templates/header-footer.php ).../template-loader.php:106
52.085620424648Elementor\Modules\PageTemplates\Module->print_content( ).../header-footer.php:19
62.085620425024call_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
72.085720425104Elementor\Modules\PageTemplates\Module->print_callback( ).../module.php:207
82.086020425856the_content( $more_link_text = ???, $strip_teaser = ??? ).../module.php:190
92.086220425880apply_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
102.086220426280WP_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
112.086920429280Elementor\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
122.086920429656Elementor\Frontend->get_builder_content( $post_id = 5196, $with_css = ??? ).../frontend.php:898
132.087620691688Elementor\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
142.095220857984Elementor\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
152.168522828464Elementor\Element_Section->print_element( ).../document.php:1296
162.172322938320Elementor\Element_Section->print_content( ).../element-base.php:650
172.258624915640Elementor\Element_Column->print_element( ).../element-base.php:907
182.261725017224Elementor\Element_Column->print_content( ).../element-base.php:650
192.311726963416Elementor\Element_Section->print_element( ).../element-base.php:907
202.315327073272Elementor\Element_Section->print_content( ).../element-base.php:650
212.315427074728Elementor\Element_Column->print_element( ).../element-base.php:907
222.318527176312Elementor\Element_Column->print_content( ).../element-base.php:650
232.324627304144OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->print_element( ).../element-base.php:907
242.441032183544OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->enqueue_scripts( ).../element-base.php:682
252.441032183920Elementor\Utils::handle_deprecation( $item = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper' ).../element-base.php:152
262.441032184784_deprecated_file( $file = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper', $message = ??? ).../utils.php:487
272.441032185856trigger_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.0002401504{main}( ).../index.php:0
20.0003401776require( '/apps/refactory-portal/wp-blog-header.php ).../index.php:17
31.962615061344require_once( '/apps/refactory-portal/wp-includes/template-loader.php ).../wp-blog-header.php:19
41.974915295936include( '/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/templates/header-footer.php ).../template-loader.php:106
52.085620424648Elementor\Modules\PageTemplates\Module->print_content( ).../header-footer.php:19
62.085620425024call_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
72.085720425104Elementor\Modules\PageTemplates\Module->print_callback( ).../module.php:207
82.086020425856the_content( $more_link_text = ???, $strip_teaser = ??? ).../module.php:190
92.086220425880apply_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
102.086220426280WP_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
112.086920429280Elementor\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
122.086920429656Elementor\Frontend->get_builder_content( $post_id = 5196, $with_css = ??? ).../frontend.php:898
132.087620691688Elementor\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
142.095220857984Elementor\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
152.168522828464Elementor\Element_Section->print_element( ).../document.php:1296
162.172322938320Elementor\Element_Section->print_content( ).../element-base.php:650
172.258624915640Elementor\Element_Column->print_element( ).../element-base.php:907
182.261725017224Elementor\Element_Column->print_content( ).../element-base.php:650
192.455232520552Elementor\Element_Section->print_element( ).../element-base.php:907
202.459032630408Elementor\Element_Section->print_content( ).../element-base.php:650
212.459032631864Elementor\Element_Column->print_element( ).../element-base.php:907
222.462132733448Elementor\Element_Column->print_content( ).../element-base.php:650
232.467532861768LivemeshAddons\Widgets\LAE_Posts_Carousel_Widget->print_element( ).../element-base.php:907
242.524433867352LivemeshAddons\Widgets\LAE_Posts_Carousel_Widget->enqueue_scripts( ).../element-base.php:682
252.524433867352Elementor\Utils::handle_deprecation( $item = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper' ).../element-base.php:152
262.524533868216_deprecated_file( $file = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper', $message = ??? ).../utils.php:487
272.524533868536trigger_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.0002401504{main}( ).../index.php:0
20.0003401776require( '/apps/refactory-portal/wp-blog-header.php ).../index.php:17
31.962615061344require_once( '/apps/refactory-portal/wp-includes/template-loader.php ).../wp-blog-header.php:19
41.974915295936include( '/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/templates/header-footer.php ).../template-loader.php:106
52.085620424648Elementor\Modules\PageTemplates\Module->print_content( ).../header-footer.php:19
62.085620425024call_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
72.085720425104Elementor\Modules\PageTemplates\Module->print_callback( ).../module.php:207
82.086020425856the_content( $more_link_text = ???, $strip_teaser = ??? ).../module.php:190
92.086220425880apply_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
102.086220426280WP_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
112.086920429280Elementor\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
122.086920429656Elementor\Frontend->get_builder_content( $post_id = 5196, $with_css = ??? ).../frontend.php:898
132.087620691688Elementor\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
142.095220857984Elementor\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
152.597329544392Elementor\Element_Section->print_element( ).../document.php:1296
162.601029654248Elementor\Element_Section->print_content( ).../element-base.php:650
172.601029655704Elementor\Element_Column->print_element( ).../element-base.php:907
182.604129757288Elementor\Element_Column->print_content( ).../element-base.php:650
192.632330421336OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->print_element( ).../element-base.php:907
202.675631406896OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->enqueue_scripts( ).../element-base.php:682
212.675631407272Elementor\Utils::handle_deprecation( $item = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper' ).../element-base.php:152
222.675631408136_deprecated_file( $file = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper', $message = ??? ).../utils.php:487
232.675631408456trigger_error( $message = 'jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead.', $error_type = 16384 ).../functions.php:5049
×