The idea behind introducing
Hooks and other features like
React.lazy is to help reduce the code that one has to write and also aggregate similar actions together.
The docs mention few really good reason to make use of Hooks instead of classes
It’s hard to reuse stateful logic between components Generally when you use HOC or renderProps you have to restructure your App with multiple hierarchies when you try to see it in DevTools, Hooks avoid such scenarios and help in clearer code
Complex components become hard to understand Often with classes Mutually unrelated code often ends up together or related code tends to be split apart, it becomes more and more difficult to maintain. An example of such a case is event listeners, where you add listeners in
componentDidMount and remove them in
componentWillUnmount . Hooks let you combine these two
Classes confuse both people and machines With classes you need to understand binding and the context in which functions are called, which often becomes confusion.
function components with hooks can't help in perf as class components does. They can't skip re-renders as they don't have shouldComponentUpdate implemented.
Function component can be memoized in a similar way as
React.PureComponent with Classes by making use of
React.memo and you can pass in a comparator function as the second argument to
React.memo that lets you implement a custom comparator
The idea is to be able write the code that you can write using React class component using function component with the help of
Hooks and other utilities. Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code.
Since hooks is not yet fully shipped, its advised to not use hooks for critical components and start with relatively small component, and yes you can completely replace classes with function components
However one reason that you should still go for Class components over the function components with hooks until Suspense is out for data fetching. Data fetching with useEffect hooks isn't as intuitive as it is with lifecycle methods.
Also @DanAbramov in one of his tweets mentioned that hooks are designed to work with Suspense and until suspense is out it's better to use Class
Hooks greatly reduce the amount of code you need to write and increase its readability.
It is worth noting though that there are hidden processes going on behind (Just like component did mount etc.) that mean if you don't understand what is going on it can be difficult to troubleshoot. It is best to experiment with them and read through the docs fully before implementing on a live project.
Also there is still limited support/documentation for testing hooks compared to classes. https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga
Update 28/08/2020 Use the react hooks testing library with custom hooks for testing https://github.com/testing-library/react-hooks-testing-library
Officially it sounds like hooks will completely replace classes?? maybe one day, but think about it; hooks have been around for 3 years (as of Mar 2021), and there are pros and cons in adopting them (More pros than cons... don't get me wrong)
I have plenty more experience myself with state management/classes and after doing a lot of research and testing, I found out that we need to know both classes and hooks very well. Hooks require a fraction of the code for simple components and seem excellent for optimizing HOCs. Meanwhile classes seem better with routing, container components and asynchronous programming for example.
I'm sure there are plenty more cases where each technology is better, but my point is that programmers need know both hooks and classes very well specially when working on projects with 100,000+ lines of code and millions of users. Read more here: https://stackoverflow.com/a/60134353/11239755
- React Function Components with hooks vs Class Components
- Components with uppercase function names are rendered multiple times in React Hooks
- How to add a CSS class to an element with React function components
- How to convert a React class component to a function component with hooks to get firebase data
- Invoking child methods with Function Components and Hooks in React
- A property is undefined - switching from class components to function hooks components in React
- React functional components with hooks - getting response from function written in reducer
- Invalid hook call. Hooks can only be called inside of the body of a function component when apply style to class base component with material-ui
- Apply style "cursor: pointer" to all React components with onClick function
- React Navigation Header in Functional Components with Hooks
- How to use redux-toolkit createSlice with React class components
- Sync queryParameters with Redux state and react router for function components
- Dispatch is not a function - React Testing Library with React Redux Hooks
- Is there a non-hook alternative for the React Material-UI makeStyles() function that works for class Components
- Debouncing (fire function only once in few second) with react hooks
- React Hook "useState" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function
- Creating and manipulating components with react hooks
- Function components cannot be given refs with React Beautiful DND
- Refactor class to function components in React
- How to show/hide spinners, snackbars, or other transient components with React Function Components
- Creating a class in react and exporting with higher order components
- Unable to Ignore Block within React Class Components with istanbul ignore next to gain coverage
- React Class vs Functional Component: When using hooks and functional components one of my functions constantly re-renders
- How to convert React class component to functional component with hooks
- How to prevent unnecessary re-renders with React Hooks, function components and function depending on item list
- How to test a handle function call with a react functional component with hooks
- How to change the html meta tags with react function components
- React hooks 'useState()' updater function with axios.post on form submits
- React Class to Function components
- React with typescript passing function as props using hooks
More Query from same tag
- Re-rendering a component on prop change
- css animate div from bottom to middle
- react - react router - privateRoute - infinite loop
- Can't use substr on a React string
- React useEffect and useState interaction
- React/Redux - Passing props from one container to another
- Running CRA Jest in non-interactive mode
- Limiting length of string displayed in React component
- React-Admin DateField, DateInput locale global
- Component will unmount not getting called after anchor tag click in react
- Fetch requests in ReactJS
- Ionic React props.match.params doesn't update
- Cant type in an input field of a form in React js
- Variable in state undefined React.js
- Pass a variable function to component in React.js
- React Textfield onChange capture previous event.target.value
- Use parent prop on child component prop
- How to mark dynamically created option as used in options list
- Invalid plugin options for "gatsby-source-contentful"
- Trouble-shooting a basic test with React and Jest
- How to avoid repeating JSX / HTML code in react?
- I'm trying to make a POST request to get receive access token, however I'm receiving undefined. How can I resolve this please?
- Make multiple axios calls using jest
- How to initialize React Native project
- Connect ReactJS to other Docker container
- Standardjs no-unused-vars while it's used
- Cleanup format in React file with VS Code
- Flux - How to initially load Store data with asynchronously fetched data