React Native Hooks , How To Use useState and useEffect Example
1. What is React Hook?
React hook is newly introduced at react conference and it’s available in react’s alpha version 16.7.
It mainly uses to handle the state and side effects in react functional component.
02. Why React Hook?
The first main reason is the Introduce state in a functional component. You know that the states cannot be used in functions. But with hooks, we can use states.
The first main reason is the Introduce state in a functional component. You know that the states cannot be used in functions. But with hooks, we can use states.
Another reason is the handle side effect in react component. It means, now you can use newly introduced state such as useEffect.
But do you know for some scenarios, there are 3 places where react fails.
.While Reuse logic between components
.Has Huge components
.Confusing classes
4.Rules
There are 2 important rules here.
1.Don’t call hooks inside the loop, condition or nested function.
Instead, always use Hooks at the top level of your React function. This rule, you ensure that Hooks are called in the same order each time a component renders.
2. Call hooks from react function. not the regular function.
So you can Call Hooks from React functional components or from the custom hooks as we discussed early. By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
Reference
State Management with React Hooks
React Hooks Cheat Sheet For 2020
Custom React Hooks with GraphQL
10 React Hooks Explained // Plus Build your own from Scratch