Intro to React Hooks- Part 1

  1. The first reason is that working with classes can sometimes bring on certain problems and extra things to worry about. For example, understanding how the this keyword works in JavaScript and remembering to bind event handlers in class components. Classes also don’t minify very well and make hot reloading unreliable.
  2. The second reason touches on some of the more advanced React topics, such as higher-order components and the render props pattern. If you’ve worked with React, you’ll know that there is no particular way to reuse stateful component logic between components. The HOC (higher-order component) and render props patterns do address this problem, however you have to restructure your components (such as wrapping your components with several other components) which can result in awkward or poor looking code that is harder to follow. There is a need to share stateful logic in a better way, and this is where Hooks can help, as they allow us to reuse stateful logic without changing the component hierarchy.
  3. The third reason has to do with how code is placed in a component, and the fact that complex components can become hard to understand. When creating components for complex scenarios such as data fetching and subscribing to events, you’ll realize that the related code is not organized in one place but rather scattered across different lifecycle methods. For example, data fetching is usually done in componentDidMount and also sometimes in componentDidUpdate. Another example is setting event listeners in componentDidMount and componentWillUnmount. As you can see, related code is separated in different methods but at the same time completely unrelated code such as data fetching and event listeners end up in the same code block (componentDidMount). In an ideal world all related code would be together, but because of stateful logic, components cannot be broken down into smaller ones. Thankfully, Hooks solve this problem as well because rather than forcing a split based on lifecycle methods, Hooks let you split one component into smaller functions based on what pieces are related.
  1. To be able to use Hooks, you have to use React version 16.8 or higher.
  2. They’re completely opt in, meaning you can try Hooks in your components without rewriting any existing code, but they don’t have to be used if you don’t want to learn or use them.
  3. They’re 100% backwards-compatible, Hooks don’t contain any breaking changes.
  4. The React team has no plans to totally remove classes from React. You can continue to use classes and gradually start rewriting them with Hooks if it’s simple enough and you feel confident.
  5. You can’t use Hooks inside of a class component, however your app can mix classes and functional components with Hooks.
  6. Hooks don’t replace your existing knowledge of React concepts, instead they provide a more direct API to the React concepts you already know (props, state, lifecycle, etc.).
  1. Hooks are a new feature addition in React version 16.8
  2. They allow you to use React features without having to write a class
  3. The main reasons for the introduction of Hooks are: a. By not having to use classes, Hooks avoid the confusion of the this keyword and components minify better b. Hooks allow you to reuse stateful logic without changing your component hierarchy, and you can avoid advanced React patterns making your code much simpler to follow, and c. Hooks let us organize the logic inside a component into reusable isolated units, and related code can be put together helping to avoid bugs and inconsistencies

--

--

--

Software Engineer/Full Stack Web Developer | Ruby, JavaScript, React, Redux

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Some ways to avoid unnecessary rerenders in React

If I Ever Teach Music Again, It Will Look Like This — Adding Javascript

Functional Programming: Immutability in TypeScript

Unleash your inner geek: Add a Custom Signup Form to Your Website to Match your Brand

An introduction to 3D web development

How the batch method from react-redux lifts the dependency of shouldComponentUpdate lifecycle…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Rosenberg

Michael Rosenberg

Software Engineer/Full Stack Web Developer | Ruby, JavaScript, React, Redux

More from Medium

Intro to React Hooks

React Context: How to Use the useContext Hook

How does useImperativeHandle() work? — React source code walkthrough

Understanding React Hooks