{"id":4220,"date":"2023-03-16T14:42:30","date_gmt":"2023-03-16T07:42:30","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=4220"},"modified":"2023-03-16T14:42:31","modified_gmt":"2023-03-16T07:42:31","slug":"react-native-tips-tricks-sample-code-hindari-rendering","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/react-native-tips-tricks-code-sample-avoid-rendering\/","title":{"rendered":"React Native Tips & Tricks - Code Sample Avoid Rendering"},"content":{"rendered":"\r\n<p>Hello guys, this article shows a simple application example to avoid re-rendering of a react native application, the re-rendering problem in a react native application is a classic problem, at the beginning of building an application sometimes we leave various re-renders which cause performance the application is slow. <\/p>\r\n\r\n\r\n\r\n<p><\/p>\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-tips-tricks-code-sample-avoid-rendering\/#Avoid_Rendering_on_TextInput\" >Avoid Rendering on TextInput<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-tips-tricks-code-sample-avoid-rendering\/#Avoid_Render_Flatlist_each_time_selecting_rows\" >Avoid Render Flatlist each time selecting rows<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Avoid_Rendering_on_TextInput\"><\/span>Avoid Rendering on TextInput<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">import React from 'react';\r\nimport {\r\n  SafeAreaView,\r\n  StyleSheet,\r\n  TextInput,\r\n  TouchableOpacity,\r\n  Text,\r\n} from 'react-native';\r\n\r\nconst UselessTextInput = () =&gt; {\r\n  const textRef = React.useRef('');\r\n\r\n  const textToRef = (text) =&gt; {\r\n    textRef.current = text;\r\n  };\r\n\r\n  const showTextInInput = () =&gt; {\r\n    console.log('value ', textRef.current);\r\n  };\r\n\r\n  console.log('render');\r\n  return (\r\n    &lt;SafeAreaView&gt;\r\n      &lt;TextInput\r\n        style={styles.input}\r\n        onChangeText={textToRef}\r\n        \/\/ value={text}\r\n      \/&gt;\r\n      &lt;TouchableOpacity onPress={showTextInInput}&gt;\r\n        &lt;Text&gt;SHOW TEXT IN INPUT&lt;\/Text&gt;\r\n      &lt;\/TouchableOpacity&gt;\r\n    &lt;\/SafeAreaView&gt;\r\n  );\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n  input: {\r\n    height: 40,\r\n    margin: 12,\r\n    borderWidth: 1,\r\n    marginTop: 50,\r\n    padding: 10,\r\n  },\r\n});\r\n\r\nexport default UselessTextInput;\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Demo : <a href=\"https:\/\/snack.expo.dev\/@rudiahmad\/avoid-rendering-on-textinput\">https:\/\/snack.expo.dev\/@rudiahmad\/avoid-rendering-on-textinput<\/a><\/p>\r\n\r\n\r\n\r\n<p>Sumber: https:\/\/stackoverflow.com\/questions\/69596418\/how-to-avoid-re-rendering-text-input<\/p>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Avoid_Render_Flatlist_each_time_selecting_rows\"><\/span>Avoid Render Flatlist each time selecting rows<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">import React, { memo, useEffect, useState } from 'react';\r\nimport { SafeAreaView, FlatList, StyleSheet } from 'react-native';\r\nimport Constants from 'expo-constants';\r\nimport { Set } from 'immutable';\r\nimport { Button, ListItem } from 'react-native-elements';\r\nimport axios from 'axios';\r\n\r\nconst Item = ({ id, title, avatarUrl, selected, onClick }) =&gt; {\r\n  console.log(`rendering item id=${id}, selected=${selected}`);\r\n  return (\r\n    &lt;ListItem\r\n      title={title}\r\n      leftAvatar={{ source: { uri: avatarUrl } }}\r\n      containerStyle={[\r\n        styles.item,\r\n        { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },\r\n      ]}\r\n      underlayColor=\"transparent\"\r\n      onPress={() =&gt; onClick(id)}\r\n    \/&gt;\r\n  );\r\n};\r\nfunction itemEq(prevItem, nextItem) {\r\n  return prevItem.id === nextItem.id &amp;&amp; prevItem.selected === nextItem.selected;\r\n}\r\n\r\n\/\/ Does not make a difference, every time a row is clicked, all rows are re-rendered\r\nconst MemoizedItem = memo(Item);\r\n\/\/ Make some difference but the behavior looks very weird. Try click around and see the log\r\nconst MemoizedItem2 = memo(Item, itemEq);\r\n\r\nconst Items = ({ data, selectedItems, onClick }) =&gt; {\r\n  console.log('rendering items');\r\n  \/\/ Replace &lt;Item \/&gt; with &lt;MemoizedItem \/&gt; or &lt;MemoizedItem2 \/&gt; to see effect\r\n  const _renderItem = ({ item }) =&gt; (\r\n    &lt;MemoizedItem\r\n      id={item.email}\r\n      title={`${item.name.title} ${item.name.first} ${item.name.last}`}\r\n      avatarUrl={item.picture.thumbnail}\r\n      selected={selectedItems.has(item.email)}\r\n      onClick={onClick}\r\n    \/&gt;\r\n  );\r\n  return (\r\n    &lt;FlatList\r\n      data={data}\r\n      renderItem={_renderItem}\r\n      keyExtractor={(item) =&gt; item.email}\r\n      extraData={selectedItems}\r\n    \/&gt;\r\n  );\r\n};\r\n\r\nconst App = () =&gt; {\r\n  const [items, setItems] = useState([]);\r\n  const [selectedItems, setSelectedItems] = useState(Set());\r\n\r\n  useEffect(() =&gt; {\r\n    const fetchData = async () =&gt; {\r\n      console.log('fetching data');\r\n      \/\/ Read 5 random users back\r\n      \/\/ Each user is like this:\r\n\r\n      \/\/ const results = await axios('https:\/\/randomuser.me\/api\/?results=5');\r\n      setItems([\r\n        {\r\n          gender: 'male',\r\n          name: {\r\n            title: 'Mr',\r\n            first: 'Harley',\r\n            last: 'Zhang',\r\n          },\r\n          location: {\r\n            street: {\r\n              number: 6470,\r\n              name: 'Buckleys Road',\r\n            },\r\n            city: 'Palmerston North',\r\n            state: 'Manawatu-Wanganui',\r\n            country: 'New Zealand',\r\n            postcode: 90911,\r\n            coordinates: {\r\n              latitude: '66.2907',\r\n              longitude: '-18.0881',\r\n            },\r\n            timezone: {\r\n              offset: '+8:00',\r\n              description: 'Beijing, Perth, Singapore, Hong Kong',\r\n            },\r\n          },\r\n          email: 'harley.zhang@example.com',\r\n          login: {\r\n            uuid: '6fda195e-3e63-476c-84d0-7c577c7b74f9',\r\n            username: 'smallbear541',\r\n            password: 'daisy1',\r\n            salt: 'p6AmByUq',\r\n            md5: '0358f2385a9936369adc89b9233f037b',\r\n            sha1: '8decc817cf32ca6e58814502bb3e54152208c5b5',\r\n            sha256:\r\n              '96ff7627348250646edd31238504271840a0cb6aaac293782f7eec1a6f884c07',\r\n          },\r\n          dob: {\r\n            date: '1987-12-07T13:00:15.244Z',\r\n            age: 33,\r\n          },\r\n          registered: {\r\n            date: '2008-01-23T19:33:01.672Z',\r\n            age: 12,\r\n          },\r\n          phone: '(474)-743-9612',\r\n          cell: '(539)-021-1315',\r\n          id: {\r\n            name: '',\r\n            value: null,\r\n          },\r\n          picture: {\r\n            large: 'https:\/\/randomuser.me\/api\/portraits\/men\/49.jpg',\r\n            medium: 'https:\/\/randomuser.me\/api\/portraits\/med\/men\/49.jpg',\r\n            thumbnail: 'https:\/\/randomuser.me\/api\/portraits\/thumb\/men\/49.jpg',\r\n          },\r\n          nat: 'NZ',\r\n        },\r\n        {\r\n          gender: 'male',\r\n          name: {\r\n            title: 'Mr',\r\n            first: 'Harley',\r\n            last: 'Zhang',\r\n          },\r\n          location: {\r\n            street: {\r\n              number: 6470,\r\n              name: 'Buckleys Road',\r\n            },\r\n            city: 'Palmerston North',\r\n            state: 'Manawatu-Wanganui',\r\n            country: 'New Zealand',\r\n            postcode: 90911,\r\n            coordinates: {\r\n              latitude: '66.2907',\r\n              longitude: '-18.0881',\r\n            },\r\n            timezone: {\r\n              offset: '+8:00',\r\n              description: 'Beijing, Perth, Singapore, Hong Kong',\r\n            },\r\n          },\r\n          email: 'harley@example.com',\r\n          login: {\r\n            uuid: '6fda195e-3e63-476c-84d0-7c577c7b74f9',\r\n            username: 'smallbear541',\r\n            password: 'daisy1',\r\n            salt: 'p6AmByUq',\r\n            md5: '0358f2385a9936369adc89b9233f037b',\r\n            sha1: '8decc817cf32ca6e58814502bb3e54152208c5b5',\r\n            sha256:\r\n              '96ff7627348250646edd31238504271840a0cb6aaac293782f7eec1a6f884c07',\r\n          },\r\n          dob: {\r\n            date: '1987-12-07T13:00:15.244Z',\r\n            age: 33,\r\n          },\r\n          registered: {\r\n            date: '2008-01-23T19:33:01.672Z',\r\n            age: 12,\r\n          },\r\n          phone: '(474)-743-9612',\r\n          cell: '(539)-021-1315',\r\n          id: {\r\n            name: '',\r\n            value: null,\r\n          },\r\n          picture: {\r\n            large: 'https:\/\/randomuser.me\/api\/portraits\/men\/49.jpg',\r\n            medium: 'https:\/\/randomuser.me\/api\/portraits\/med\/men\/49.jpg',\r\n            thumbnail: 'https:\/\/randomuser.me\/api\/portraits\/thumb\/men\/49.jpg',\r\n          },\r\n          nat: 'NZ',\r\n        },\r\n      ]);\r\n    };\r\n    fetchData();\r\n  }, []);\r\n\r\n  \/\/ Does not help\r\n  const onClickUseCallBack = React.useCallback((id) =&gt; {\r\n    setSelectedItems((selectedItems) =&gt; {\r\n      const newSelectedItems = selectedItems.has(id)\r\n        ? selectedItems.delete(id)\r\n        : selectedItems.add(id);\r\n\r\n      return newSelectedItems;\r\n    });\r\n  }, []);\r\n\r\n  return (\r\n    &lt;SafeAreaView style={styles.container}&gt;\r\n      &lt;Items\r\n        data={items}\r\n        selectedItems={selectedItems}\r\n        onClick={onClickUseCallBack}\r\n      \/&gt;\r\n      &lt;Button\r\n        title=\"Print\"\r\n        onPress={() =&gt; console.log(`Printing selected items ${selectedItems}`)}\r\n      \/&gt;\r\n    &lt;\/SafeAreaView&gt;\r\n  );\r\n};\r\n\r\nexport default App;\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    marginTop: Constants.statusBarHeight,\r\n    marginHorizontal: 16,\r\n  },\r\n  item: {\r\n    backgroundColor: '#f9c2ff',\r\n    padding: 20,\r\n    marginVertical: 8,\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Demo: <a href=\"https:\/\/snack.expo.dev\/@rudiahmad\/avoid-rendering-on-flatlist-selectable-flatlist-new\" title=\"\">https:\/\/snack.expo.dev\/@rudiahmad\/avoid-rendering-on-flatlist-selectable-flatlist-new<\/a><\/p>\r\n\r\n\r\n\r\n<p>Sumber: https:\/\/stackoverflow.com\/questions\/60356434\/how-to-avoid-react-native-flatlist-re-render-every-time-i-select-de-select-a-row<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Hello guys, this article shows a simple application example to avoid re-rendering of a react native application, the re-rendering problem in a react native application is a classic problem, at the beginning of building&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":4251,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[173],"tags":[150,145],"class_list":["post-4220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native","tag-react-native","tag-source-code"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=4220"}],"version-history":[{"count":11,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4220\/revisions"}],"predecessor-version":[{"id":4253,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4220\/revisions\/4253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/4251"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=4220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=4220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=4220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}