{"id":6089,"date":"2019-05-24T13:42:02","date_gmt":"2019-05-24T11:42:02","guid":{"rendered":"https:\/\/interacso.com\/blog\/?p=6089"},"modified":"2019-05-24T13:42:02","modified_gmt":"2019-05-24T11:42:02","slug":"react-performance-and-advanced-devtools-2","status":"publish","type":"post","link":"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/","title":{"rendered":"React performance and advanced DevTools"},"content":{"rendered":"[vc_row type=\u00bbin_container\u00bb full_screen_row_position=\u00bbmiddle\u00bb scene_position=\u00bbcenter\u00bb text_color=\u00bbdark\u00bb text_align=\u00bbleft\u00bb class=\u00bbpost-row-center\u00bb overlay_strength=\u00bb0.3″ shape_divider_position=\u00bbbottom\u00bb bg_image_animation=\u00bbnone\u00bb shape_type=\u00bb\u00bb][vc_column column_padding=\u00bbno-extra-padding\u00bb column_padding_position=\u00bball\u00bb background_color_opacity=\u00bb1″ background_hover_color_opacity=\u00bb1″ column_link_target=\u00bb_self\u00bb column_shadow=\u00bbnone\u00bb column_border_radius=\u00bbnone\u00bb width=\u00bb4\/5″ tablet_width_inherit=\u00bbdefault\u00bb tablet_text_alignment=\u00bbdefault\u00bb phone_text_alignment=\u00bbdefault\u00bb column_border_width=\u00bbnone\u00bb column_border_style=\u00bbsolid\u00bb bg_image_animation=\u00bbnone\u00bb][vc_column_text]React es un framework muy conocido por la comunidad<\/strong> con una gran cantidad de herramientas y desarrollos de terceros, utilizados desde proyectos grandes a peque\u00f1os, pero… \u00bfconocemos realmente su funcionamiento?<\/strong>. \u00bfC\u00f3mo funciona exactamente el DOM Virtual<\/strong>? \u00bfCu\u00e1l es su rendimiento?<\/p>\n

\"\"<\/p>\n

Este framework ha ido evolucionando mucho desde su nacimiento, incorporando varios m\u00e9todos y herramientas, para mejorar\/medir su propio rendimiento. En esta charla haremos un repaso por cada uno de ellos, introduci\u00e9ndonos en profundidad en su funcionamiento, modificaci\u00f3n y construcci\u00f3n del DOM virtual.<\/p>\n

Entre las herramientas<\/strong> m\u00e1s llamativas veremos:<\/p>\n

– La herramienta de rendimiento de Google Chrome<\/p>\n

– El Profiling de React extension<\/em><\/p>\n

– Los Highlight updates<\/em><\/p>\n

– React environment tester<\/em><\/p>\n

– Pruebas manuales<\/p>\n

Adem\u00e1s, por otro lado se explican los mejores consejos para solventar los problemas m\u00e1s frecuentes con c\u00f3digo<\/strong> y se hace un repaso por los 4 tipos de componentes m\u00e1s comunes y \u00fatiles de React, detallando cada uno de ellos a nivel de performance<\/em>.<\/strong><\/p>\n

A continuaci\u00f3n se puede ver el video de la Interacso Talk<\/strong> completa con el detalle de todo lo descrito anteriormente.<\/p>\n[\/vc_column_text][vc_video link=\u00bbhttps:\/\/youtu.be\/Dzju8-fgN4U\u00bb][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"

[vc_row type=\u00bbin_container\u00bb full_screen_row_position=\u00bbmiddle\u00bb scene_position=\u00bbcenter\u00bb text_color=\u00bbdark\u00bb text_align=\u00bbleft\u00bb class=\u00bbpost-row-center\u00bb overlay_strength=\u00bb0.3″ shape_divider_position=\u00bbbottom\u00bb bg_image_animation=\u00bbnone\u00bb shape_type=\u00bb\u00bb][vc_column column_padding=\u00bbno-extra-padding\u00bb column_padding_position=\u00bball\u00bb background_color_opacity=\u00bb1″ background_hover_color_opacity=\u00bb1″ column_link_target=\u00bb_self\u00bb column_shadow=\u00bbnone\u00bb column_border_radius=\u00bbnone\u00bb width=\u00bb4\/5″ tablet_width_inherit=\u00bbdefault\u00bb tablet_text_alignment=\u00bbdefault\u00bb phone_text_alignment=\u00bbdefault\u00bb column_border_width=\u00bbnone\u00bb column_border_style=\u00bbsolid\u00bb bg_image_animation=\u00bbnone\u00bb][vc_column_text]React…<\/p>\n","protected":false},"author":5,"featured_media":6080,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[32,93,36,92,90,58,94,91,33,89,74,57],"yoast_head":"\nReact performance and advanced DevTools - Blog de Interacso<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React performance and advanced DevTools - Blog de Interacso\" \/>\n<meta property=\"og:description\" content=\"[vc_row type=\u00bbin_container\u00bb full_screen_row_position=\u00bbmiddle\u00bb scene_position=\u00bbcenter\u00bb text_color=\u00bbdark\u00bb text_align=\u00bbleft\u00bb class=\u00bbpost-row-center\u00bb overlay_strength=\u00bb0.3″ shape_divider_position=\u00bbbottom\u00bb bg_image_animation=\u00bbnone\u00bb shape_type=\u00bb\u00bb][vc_column column_padding=\u00bbno-extra-padding\u00bb column_padding_position=\u00bball\u00bb background_color_opacity=\u00bb1″ background_hover_color_opacity=\u00bb1″ column_link_target=\u00bb_self\u00bb column_shadow=\u00bbnone\u00bb column_border_radius=\u00bbnone\u00bb width=\u00bb4\/5″ tablet_width_inherit=\u00bbdefault\u00bb tablet_text_alignment=\u00bbdefault\u00bb phone_text_alignment=\u00bbdefault\u00bb column_border_width=\u00bbnone\u00bb column_border_style=\u00bbsolid\u00bb bg_image_animation=\u00bbnone\u00bb][vc_column_text]React...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de Interacso\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/interacso\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-24T11:42:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/interacso.com\/blog\/wp-content\/uploads\/2019\/05\/Portada-react-post-interacso.png\" \/>\n\t<meta property=\"og:image:width\" content=\"384\" \/>\n\t<meta property=\"og:image:height\" content=\"384\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Juan Toledo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@interacso\" \/>\n<meta name=\"twitter:site\" content=\"@interacso\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Toledo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/\"},\"author\":{\"name\":\"Juan Toledo\",\"@id\":\"https:\/\/interacso.com\/blog\/#\/schema\/person\/18abe475400a16c046dbcd24711d8039\"},\"headline\":\"React performance and advanced DevTools\",\"datePublished\":\"2019-05-24T11:42:02+00:00\",\"dateModified\":\"2019-05-24T11:42:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/\"},\"wordCount\":298,\"publisher\":{\"@id\":\"https:\/\/interacso.com\/blog\/#organization\"},\"keywords\":[\"c\u00f3digo\",\"consejos\",\"desarrolladores\",\"desarrollo\",\"DOM\",\"Interacso Talk\",\"mejora\",\"performance\",\"programaci\u00f3n\",\"React\",\"video\",\"Youtube\"],\"articleSection\":[\"Desarrollo y tecnolog\u00eda\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/\",\"url\":\"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/\",\"name\":\"React performance and advanced DevTools - Blog de Interacso\",\"isPartOf\":{\"@id\":\"https:\/\/interacso.com\/blog\/#website\"},\"datePublished\":\"2019-05-24T11:42:02+00:00\",\"dateModified\":\"2019-05-24T11:42:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/interacso.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React performance and advanced DevTools\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/interacso.com\/blog\/#website\",\"url\":\"https:\/\/interacso.com\/blog\/\",\"name\":\"Blog de Interacso\",\"description\":\"Transformaci\u00f3n digital, innovaci\u00f3n y cultura digital\",\"publisher\":{\"@id\":\"https:\/\/interacso.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/interacso.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/interacso.com\/blog\/#organization\",\"name\":\"interacso\",\"url\":\"https:\/\/interacso.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/interacso.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/blog.interacso.dev\/wp-content\/uploads\/2019\/05\/interacso_isotipo_blanco_slack_no_fil_no_margin_512px.png\",\"contentUrl\":\"https:\/\/blog.interacso.dev\/wp-content\/uploads\/2019\/05\/interacso_isotipo_blanco_slack_no_fil_no_margin_512px.png\",\"width\":512,\"height\":512,\"caption\":\"interacso\"},\"image\":{\"@id\":\"https:\/\/interacso.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/interacso\/\",\"https:\/\/twitter.com\/interacso\",\"https:\/\/instagram.com\/interacso_\/\",\"https:\/\/www.linkedin.com\/company\/interacso\/\",\"https:\/\/www.youtube.com\/user\/interacso\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/interacso.com\/blog\/#\/schema\/person\/18abe475400a16c046dbcd24711d8039\",\"name\":\"Juan Toledo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/interacso.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4e10c7c30b3348a70448ddf48765a7ef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4e10c7c30b3348a70448ddf48765a7ef?s=96&d=mm&r=g\",\"caption\":\"Juan Toledo\"},\"url\":\"https:\/\/interacso.com\/blog\/author\/juan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React performance and advanced DevTools - Blog de Interacso","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/","og_locale":"es_ES","og_type":"article","og_title":"React performance and advanced DevTools - Blog de Interacso","og_description":"[vc_row type=\u00bbin_container\u00bb full_screen_row_position=\u00bbmiddle\u00bb scene_position=\u00bbcenter\u00bb text_color=\u00bbdark\u00bb text_align=\u00bbleft\u00bb class=\u00bbpost-row-center\u00bb overlay_strength=\u00bb0.3″ shape_divider_position=\u00bbbottom\u00bb bg_image_animation=\u00bbnone\u00bb shape_type=\u00bb\u00bb][vc_column column_padding=\u00bbno-extra-padding\u00bb column_padding_position=\u00bball\u00bb background_color_opacity=\u00bb1″ background_hover_color_opacity=\u00bb1″ column_link_target=\u00bb_self\u00bb column_shadow=\u00bbnone\u00bb column_border_radius=\u00bbnone\u00bb width=\u00bb4\/5″ tablet_width_inherit=\u00bbdefault\u00bb tablet_text_alignment=\u00bbdefault\u00bb phone_text_alignment=\u00bbdefault\u00bb column_border_width=\u00bbnone\u00bb column_border_style=\u00bbsolid\u00bb bg_image_animation=\u00bbnone\u00bb][vc_column_text]React...","og_url":"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/","og_site_name":"Blog de Interacso","article_publisher":"https:\/\/www.facebook.com\/interacso\/","article_published_time":"2019-05-24T11:42:02+00:00","og_image":[{"width":384,"height":384,"url":"https:\/\/interacso.com\/blog\/wp-content\/uploads\/2019\/05\/Portada-react-post-interacso.png","type":"image\/png"}],"author":"Juan Toledo","twitter_card":"summary_large_image","twitter_creator":"@interacso","twitter_site":"@interacso","twitter_misc":{"Written by":"Juan Toledo","Est. reading time":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/#article","isPartOf":{"@id":"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/"},"author":{"name":"Juan Toledo","@id":"https:\/\/interacso.com\/blog\/#\/schema\/person\/18abe475400a16c046dbcd24711d8039"},"headline":"React performance and advanced DevTools","datePublished":"2019-05-24T11:42:02+00:00","dateModified":"2019-05-24T11:42:02+00:00","mainEntityOfPage":{"@id":"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/"},"wordCount":298,"publisher":{"@id":"https:\/\/interacso.com\/blog\/#organization"},"keywords":["c\u00f3digo","consejos","desarrolladores","desarrollo","DOM","Interacso Talk","mejora","performance","programaci\u00f3n","React","video","Youtube"],"articleSection":["Desarrollo y tecnolog\u00eda"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/","url":"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/","name":"React performance and advanced DevTools - Blog de Interacso","isPartOf":{"@id":"https:\/\/interacso.com\/blog\/#website"},"datePublished":"2019-05-24T11:42:02+00:00","dateModified":"2019-05-24T11:42:02+00:00","breadcrumb":{"@id":"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/interacso.com\/blog\/2019\/05\/24\/react-performance-and-advanced-devtools-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/interacso.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React performance and advanced DevTools"}]},{"@type":"WebSite","@id":"https:\/\/interacso.com\/blog\/#website","url":"https:\/\/interacso.com\/blog\/","name":"Blog de Interacso","description":"Transformaci\u00f3n digital, innovaci\u00f3n y cultura digital","publisher":{"@id":"https:\/\/interacso.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/interacso.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/interacso.com\/blog\/#organization","name":"interacso","url":"https:\/\/interacso.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/interacso.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/blog.interacso.dev\/wp-content\/uploads\/2019\/05\/interacso_isotipo_blanco_slack_no_fil_no_margin_512px.png","contentUrl":"https:\/\/blog.interacso.dev\/wp-content\/uploads\/2019\/05\/interacso_isotipo_blanco_slack_no_fil_no_margin_512px.png","width":512,"height":512,"caption":"interacso"},"image":{"@id":"https:\/\/interacso.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/interacso\/","https:\/\/twitter.com\/interacso","https:\/\/instagram.com\/interacso_\/","https:\/\/www.linkedin.com\/company\/interacso\/","https:\/\/www.youtube.com\/user\/interacso"]},{"@type":"Person","@id":"https:\/\/interacso.com\/blog\/#\/schema\/person\/18abe475400a16c046dbcd24711d8039","name":"Juan Toledo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/interacso.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4e10c7c30b3348a70448ddf48765a7ef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4e10c7c30b3348a70448ddf48765a7ef?s=96&d=mm&r=g","caption":"Juan Toledo"},"url":"https:\/\/interacso.com\/blog\/author\/juan\/"}]}},"_links":{"self":[{"href":"https:\/\/interacso.com\/blog\/wp-json\/wp\/v2\/posts\/6089"}],"collection":[{"href":"https:\/\/interacso.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/interacso.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/interacso.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/interacso.com\/blog\/wp-json\/wp\/v2\/comments?post=6089"}],"version-history":[{"count":3,"href":"https:\/\/interacso.com\/blog\/wp-json\/wp\/v2\/posts\/6089\/revisions"}],"predecessor-version":[{"id":6092,"href":"https:\/\/interacso.com\/blog\/wp-json\/wp\/v2\/posts\/6089\/revisions\/6092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/interacso.com\/blog\/wp-json\/wp\/v2\/media\/6080"}],"wp:attachment":[{"href":"https:\/\/interacso.com\/blog\/wp-json\/wp\/v2\/media?parent=6089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/interacso.com\/blog\/wp-json\/wp\/v2\/categories?post=6089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/interacso.com\/blog\/wp-json\/wp\/v2\/tags?post=6089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}