Previously, React features such as state and lifecycle functions are available only for class-based components. Function-based components are referred to as dumb, skinny, or just presentational components because they can’t have access to state and lifecycle functions.
But since the release of React Hooks, function-based components have been elevated into first-class citizens of React. It has enabled function components to compose, reuse, and share React code in new ways.
In this post, I will share 5 tips about React Hooks that will be useful to keep as a guideline as you implement hooks into your components.
Don’t call hooks inside loops, conditions, and nested functions. When you want to use some hooks conditionally, write the condition inside those hooks.
This rule will ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.
Don’t call hooks from regular JavaScript functions. Call hooks only from function components or custom hooks.
By following this rule, you make sure that all stateful logic in a component is clearly visible from the source code.
React team has also created an ESLint plugin named eslint-plugin-react-hooks to help developers write React Hooks the right way in their projects. This plugin will help you to catch and fix hooks errors before you even try to run your application.
It has 2 simple rules:
When you create class components, there is a certain ordering that optimizes the way you maintain and improve your React application code.
First, you call the constructor and initiate your state. Then, you write the lifecycle functions, followed by any functions relevant to the component’s job. Finally, you write the render method.
When writing function components, there is no constructor and lifecycle function, so you might be confused because the structure isn’t as enforced as in a class component.
But just like with class components, creating a defined structure for your function components will help your project’s readability.
It’s recommended to first declare state variables with useState hook, then write the subscriptions with useEffect hook followed by any function relevant to the component’s job.
Then finally, you return the elements to be rendered by the browser.
As you build your application, you will notice that some of your application logic will be used again and again across many components.
You can use tools like Bit (Github) to publish your hooks to a single curated collection. This way you can install and reuse them across your applications. It doesn't require you to create a whole new “hooks library” project — you can gradually “push” new hooks, from any project, to your shared collection.
The only caveat for this approach is that you can’t use Hooks inside class components. So if you still have legacy class components in your project, you either need to convert those components into functions or use other reusable logic patterns (with HOC or Render Props)
Prop drilling is a common problem in React application where you pass data down from one parent component through the component layers until it reaches the designated child component, while other nested components don’t actually need them
React Context is a feature that provides a way to pass data down through the component tree without needing to pass props manually between components. The value of React Context defined in the parent component can be accessed by its descendants through the useContext hook.
React Hooks is a great addition to the React library because it allows you to compose, reuse, and share React code in a way that can’t be done without it. As Hooks change the way developers write React components, a new set of best practices for writing React Hooks are needed to make development and collaboration easier across many teams.