React Hooks have been around since React 16.8 and remain as popular and in demand as ever. They have introduced a completely new way of handling components in React, which may lead you to reevaluate your approach to coding on a fundamental level. Having already been established as the most beloved front-end framework according to popularity polls, React went above and beyond with the introduction of . Stackoverflow Hooks At first glance, React Hooks may seem as an alternative to classes or even straight-out replacement. Many have expressed that opinion, however, that is wrong. React Hooks in no way are equivalent to classes. The concept is different, as well as realization, so what might look similar on the surface, is an entirely new concept when it comes to practice. With Hooks, there’s a need for a declarative approach with its strict mathematical logic. In the new release, React changed the approach to Functional programming, leaving OOP out of the spotlight where it’s been comfortably residing since its rise in popularity in the 80s. This presented itself in a few ways. Functions are now at the centre-point in React, shifting the focus away from classes. As a result, we have a completely different method of rendering, which we’ll illustrate with the following examples. Let’s start with the classes. We define a component with a start value of zero and also use to set a timeout when the state reaches the value of 5000. componentDidMount export { state = {value: } componentDidMount() { setTimeout(() => console.log( .state.value), ); } default . class App extends React Component 0 this 5000 Our component is a button that will return the number of clicks on each render, triggered by the change in state. With each the value changes to . onClick value +1 render() { ( ) } return this.setState(({ value }) => ({ value: value + 1 }))} > click on me < = () => button onClick { </ > button This global object within the component (class) is a singleton with the link to the state at every instance. It will be the same in each render, meaning if you open the page and click the button a few times, the number that’ll appear in the console will show you how many times exactly you clicked the button. This shows how the renders refer to a single object. With Hooks, the result will be quite different and more alike the functions in JS. On each render, a new environment will be produced, so each time you’ll be getting a new set of data. Let’s take a look at the example. We set the initial state as zero with the help of hook. useState { [state, setState] = React.useState({ : }); } export default ( ) function App let count 0 Then we use the hook to set a timeout for when the number of clicks gets to 5000. In the previous example, we achieved this by using . useEffect componentDidMount React.useEffect( { setTimeout( { .log(state.count); }, ); }, []); => () => () console 5000 Again, we’ll be counting the number of clicks on the button with each the state changing to . onClick state + 1 ( ); return { setState(state => state +1); }} > increase count < = => button onClick {() </ > button React accounts for all changes in state Hook, calling on the function-component each time render is triggered. This means that all variables and functions are in closure and therefore different on each render. What it means in practice, is that, if we take the same example, but express it using React Hooks, when you click on the button while the render is in progress, you’ll get a zero on the output. On each render, the and will be different. state useEffect This is something worth learning and using in your code. If you’re still not sure as to why the need for this change, learn more about and the reasoning behind their introduction. You’ll see that Hooks are a great addition to React and once you start using them, you’ll reap the benefit right away. React Hooks
