{"id":435,"date":"2022-04-11T09:50:25","date_gmt":"2022-04-10T23:50:25","guid":{"rendered":"http:\/\/www.kernelio.com\/blog\/?p=435"},"modified":"2022-04-11T09:50:25","modified_gmt":"2022-04-10T23:50:25","slug":"react-hooks-more-than-just-syntax-sugar","status":"publish","type":"post","link":"https:\/\/www.kernelio.com\/blog\/2022\/04\/11\/react-hooks-more-than-just-syntax-sugar\/","title":{"rendered":"React Hooks &#8211; More than just syntax sugar?"},"content":{"rendered":"<p>React hooks decouples state management from class based react component and allow it to be consumed in functional way. However the overwhelming limitation of &#8220;<em>Don\u2019t call Hooks inside loops, conditions, or nested functions<\/em>&#8221; brings a lot of headache to developers.<\/p>\n<p>&nbsp;<\/p>\n<p>There are 5 most useful hooks.<\/p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\">\n<pre class=\"gatsby-code-jsx\"><code class=\"gatsby-code-jsx\"><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">[<\/span>state<span class=\"token punctuation\">,<\/span> setState<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">useState<\/span><span class=\"token punctuation\">(<\/span>initialState<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<\/div>\n<p>useState is a nice and clean way to access react state management.<\/p>\n<pre>useEffect(didUpdate);<\/pre>\n<p>useEffect combines componentDidMount(), componentDidUpdate() and componentWillUnmount(). It looks nice but in practice if developer identifies similar logic in react life cycle methods, they would abstract them into a separate function anyway. When it comes to clean up registered effects, hooks does not offer more code readability. Further more there is potential <a href=\"https:\/\/reactjs.org\/docs\/hooks-effect.html#tip-optimizing-performance-by-skipping-effects\">performance issue<\/a> as react cleans up effects on every render.<\/p>\n<p>&nbsp;<\/p>\n<p>context is a nice feature within react which saves your effort of passing props from parents to deeply nested child. However as complexity grows Redux is often preferred over context<\/p>\n<p>useMemo helps to avoid expensive calculations on every render.<\/p>\n<p>useRef is most used to access an DOM element<\/p>\n<pre>const value = useContext(MyContext);<\/pre>\n<pre>const memoizedValue = useMemo(() =&gt; computeExpensiveValue(a, b), [a, b]);<\/pre>\n<pre>const refContainer = useRef(initialValue);<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>React hooks decouples state management from class based react component and allow it to be consumed in functional way. However the overwhelming limitation of &#8220;Don\u2019t call Hooks inside loops, conditions, or nested functions&#8221; brings a lot of headache to developers. &nbsp; There are 5 most useful hooks. const [state, setState] = useState(initialState); useState is a&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-435","post","type-post","status-publish","format-standard","hentry","category-front-end"],"_links":{"self":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts\/435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":1,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts\/435\/revisions"}],"predecessor-version":[{"id":436,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts\/435\/revisions\/436"}],"wp:attachment":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/media?parent=435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/categories?post=435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/tags?post=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}