The Future of Building React Components
Until now, ‘stateful’ logic or data that changes within a React application was tightly attached to a class-based component. However, what this led to was a complex tree of nested components which made passing data and props quite confusing as the application would grow in size and complexity. Hooks changed everything by giving access to lower-level features of React outside the context of the class-based component.
If you’ve ever worked with a class-based component, you know that it can be confusing. There are words like “bind” and “this” which can cause a confusing understanding of the data and method flow. Functional components are easier to read because there are no class constructors or attribute binding as you’d see in a class-based component. Functional components can be written as a simple JS function or as an arrow function using ES6 syntax, and their props are passed in as arguments. The use of ES6 destructuring makes it even simpler to access its props.
React hooks were introduced in 2019 which forever changed the way developers were using react to build components. “React hooks are functions that let you “hook into” React state and lifecycle features from functional components.” The hooks themselves are built-in React functions that always start with the word “use” because you’re essentially “using” the superpowers of these new react features.”
The first hook is the useState() hook which is arguably the most important hook. We call this hook to add some local state to the component. This hook simply returns 2 things; the current state value and a function that lets you update the value. When Initializing this hook, you can pass an optional argument which is the default value. One rule to be aware of when beginning to learn hooks is that hooks are only called at the top of the component. They also don’t work inside regular JS functions, nested functions, loops, or anything else like that.
Another widely used hook is the useEffect() hook. UseEffects is a function that takes a function that you define as its first argument. React will then run the function any time stateful data loads or changes in the component. If you’re familiar with React’s Class Components and React’s Lifecycle method, you can think of the useEffect hook as a componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods all combined into a single, more simplified function.
We might want to have more control over this behavior. For example, by fetching some data when the component initially renders, then updating the stateful data asynchronously after the data was fetched. As mentioned, the useEffect hooks also runs after the state in the component updates. To prevent this, you pass a second argument to useEffect which is an array of dependencies. If you add an empty array, it means there are no dependencies which mean it will only run once when the component is first initialized. Components using the useEffect hook also won’t block the browser from updating the screen, unlike the lifecycle methods. This makes your app feel more responsive as the majority of effects don’t need to happen synchronously.
There are a handful of other really helpful hooks that you can learn about in the React.js Hooks Documentation. With the majority of users moving towards functional components as best practice, newer versions of React might be heading towards a place where Class-based Component can soon be deprecated. React hooks provide an intuitive way to write cleaner, more efficient components, and even give you the ability to build your own hooks from scratch so that you can extract your own component logic into reusable functions.