What are hooks?
Hooks are the features that allows developers to build react applications in functional components without using class components. One can think of Hooks as functions that dive into the state and other react features and make them available so that a developer can use them inside a functional component.
Why to use hooks?
Earlier functional components were called stateless components as stateful logic could not be applied in functional components. The react features state, lifecycle, refs, etc. were only used in class components but this made a developer write lines of code to achieve the desired functionality. Stateful logic was difficult to share between components, to fetch data into components was done by lifecycle features; after implementing these features in class components the components would grow into huge unmanageable mess of code. The same code had to be written to perform the exact functionality in another component, which was a very lengthy process. Hence, hooks were introduced to overcome these problems so that the react features can be used in functional components.
Basic Hooks
useState
State is a react feature which allows a developer to preserve values between the re-renders, it is more of a private memory of a component, in which values of that particular component it has been called-in or used-in can be stored. This feature is made possible to use with a functional component with the help of useState hook. useState is a hook that allows a developer to use state inside functional components.
Syntax
const [state, setstate] = useState(initialState)
The above syntax shows how to call a state variable in a functional component using useState. useState returns two variables, one as the current state value and the other as a function. These variables can be extracted from useState by array de-structuring syntax, this allows a user not only to access these variables but to have customized naming. The initial value of state is defined inside the parenthesis. The initial value has either directly the value or in an object.
Why to use useState?
The main factor that differentiates a state from normal JavaScript constants and variables is that; If the value stored in a variable is updated then react will be unaware that the value is changed and leads to failure of updation of that in DOM. While using state as soon as the value is updated it lets the react know that the value is updated and hence it re-renders the updated value to the DOM.
Where and where not to use useState?
useState should be used when an internal state is required to store information and the DOM has to be updated simultaneously. It should not be used for performing complex logic or inside complicated functions.
useEffect
Sometimes a developer wants to fetch data or perform some operations after react has updated the DOM. This can be done by react lifecycle methods. In class components this is done by using the components: componentDidMount, componentdidUpdate, componentDidUnmount. This could not be performed in functional components until useEffect hook was introduced. useEffect is a hook that allows a developer to perform the desired operation as soon as the component is rendered. This data fetching or performing the functions after the component is rendered is often known as side-effect. React also promises that by the time useEffect begins to execute the component is rendered.
Syntax
useEffect(() => {
effect
return () => {
cleanup
}
}, [input])
By calling the useEffect() hook one can perform operations inside it. In the above syntax ‘effect’ is the part where the code for the side effect to be executed after the component is rendered is written. There are generally two types of effects one that does not require cleanup and the other that requires the cleanup. ‘cleanup’ is the part where the code to clear the previous values effect has so that it doesn't mix up the new values with old one’s. The useEffect also has a second parameter as an array. This array is used to pass the props to effect so that we can conditionally render the effect, this means if the props is changed in the array then the effect takes place or else it won't re-render unnecessarily.
Why to use useEffect?
While writing these effects in class components most of the code had to be duplicated into the lifecycle methods componentDidMount, componentdidUpdate, componentDidUnmount. Though the logic behind the code is the same but as the developer wants to re-render after every update the code has to be duplicated into these lifecycle methods. But what if the developer wants more side effects to be executed, the code will be unmanageable again. So the useEffect becomes handy as it allows the developer to perform all the operation inside it while making the code very less when compared to class components and also it allows to use multiple useEffects hooks to separate the unrelated logic to avoid confusion.
Where and where not to use useEffect?
useEffect should be used when complex logic is to be performed or prefetching data after the component is rendered. It shouldn't be used to set props for components, for example setting the theme of components using useEffect.