Return to site

REACT: What is a Hook? 🪝

· fullstack,react

Hooks were added to React in version 16.8. 🆕

Hooks allow function components to have access to state and other React features. 🤗

Because of this, class components are generally no longer needed.🚮

ᴬˡᵗʰᵒᵘᵍʰ ᴴᵒᵒᵏˢ ᵍᵉⁿᵉʳᵃˡˡʸ ʳᵉᵖˡᵃᶜᵉ ᶜˡᵃˢˢ ᶜᵒᵐᵖᵒⁿᵉⁿᵗˢ, ᵗʰᵉʳᵉ ᵃʳᵉ ⁿᵒ ᵖˡᵃⁿˢ ᵗᵒ ʳᵉᵐᵒᵛᵉ ᶜˡᵃˢˢᵉˢ ᶠʳᵒᵐ ᴿᵉᵃᶜᵗ.

Hooks allow us to "hook" into React features such as state and lifecycle methods.🪝

EXAMPLE:

Here is an example of a Hook.

 

You must import Hooks from react.

Here we are using the useState Hook to keep track of the application state.

State generally refers to application data or properties that need to be tracked.

3 HOOK RULES

1) Hooks can only be called inside React function components.📥

2) Hooks can only be called at the top level of a component.🔝

3) Hooks cannot be conditional ❌

ᴺᵒᵗᵉ: ᴴᵒᵒᵏˢ ʷⁱˡˡ ⁿᵒᵗ ʷᵒʳᵏ ⁱⁿ ᴿᵉᵃᶜᵗ ᶜˡᵃˢˢ ᶜᵒᵐᵖᵒⁿᵉⁿᵗˢ.

CUSTOM HOOK

If you have stateful logic that needs to be reused in several components, you can build your own custom Hooks.🔧

 

#react #programming #hook #fullstack