Do you ever scroll down your Facebook feed when all of a sudden, a button pops up, notifying you of new posts? Well, in this case, you’ve had first-hand experience with React. React came about in 2011 as a result of relentless attempts of Facebook to perfect the user experience of the Facebook application. It was released into the public two years later as an open-source JavaScript library used for building single-page and mobile applications. Since then, fixes and improvements are being added multiple times a year with each consecutive release. One such addition was React hooks, which seems to have had a significant impact on app development and to this day remains a trendy topic. Let’s take a closer look and find out why that’s the case.
React hooks were introduced in React 16.8 as a way to assign certain features to function components without the need to introduce classes. Function components were known as function stateless components before, as using state was primarily a characteristic available in class components. This means that in the past you would have to rewrite these components as classes, spending a lot more time and bulking up the code as a result. However, with the introduction of hooks in React, that has changed.
Why React Hooks?
React JS on top of web framework popularity poll according to Stackoverflow - Most Loved, Dreaded, and Wanted Languages
Primarily hooks were designed to use stateful components without the need to introduce classes. Classes are confusing for both people and machines. The introduction of classes into your code requires a lot of writing and the logic might not always be straightforward. With classes you had to remember to call super(props) and bind methods in the class constructor. This might seem like a minor nuisance, but if it becomes part of your day-to-day life and takes up a significant chunk of your time at some point, you’ll have to start asking yourself if it’s really the best way to write code. New releases tried to handle this by introducing class fields and later higher-order components (HOC). However, it not only didn’t eliminate all the issues but resulted in new problems like over-wrapping of components and issues following the logic.
React was in need of a new concept. Something to encapsulate all the functionality they were lacking with HOCs and render props. This is how React hooks came into existence. In no way does this mean that hooks are there to replace classes, higher-order components, and goodness knows what else. You can still use whatever you prefer depending on the project and your immediate need. However, you can’t deny that it’s nice having a choice for once.
A few built-in hooks are already available in React. You can make your own custom hooks as well. The most used are useState and useEffect, that are used to control states and side-effects in React respectively. Some other hooks are useContext (which, alongside useState and useEffect, is one of the three basic hooks), useReducer, useMemo, and useRef to name a few.
View blog and read more about pros and cons of React hooks. The post appeared first on Software Development Company Symphony Solutions.
Top comments (2)
Nice post, BTW the image you are trying to show(sourced from stack overflow) is not showing up.
Thanks. I just simply put the link to the picture - it has to work now.