📄 Table of Contents

Introduction:

➪ Hooks run each time component re-renders

➪ Use basic hooks as much as possible

Why Hooks over traditional react life-cycles?

React HOOKS (v >= 16.8.0) :

const [ i, seti] = useState(initialState);
useEffect(
()=> {
console.log(“runs on first render only”}, [ ]
)
useEffect(
()=> {
console.log(“runs only when age changes ”), [age]}
)
useEffect(() => {
async function fetchData() {
const res = await fetch("https://swapi.co/api/planets/4/");
res
.json()
.then(res => setPlanets(res))
.catch(err => setErrors(err));
}
fetchData();
});
async function fetchData() {
const res = await fetch("https://swapi.co/api/planets/4/");
res
.json()
.then(res => setPlanets(res))
.catch(err => setErrors(err));
}
useEffect(() => {
fetchData();
});
useEffect(() => {
// This gets called after every render, by default
// (the first one, and every one after that)
console.log('render!');
// If you want to implement componentWillUnmount,
// return a function from here, and React will call
// it prior to unmounting.
return () => console.log('unmounting...');
})
const [ state, dispatch ] = useReducer(reducer, initialArg, init);

Context APIs” to the Rescue…

Context API the hook way

❌. When NOT to use React Hooks

Writing Your Own Custom React Hooks

Using Simple Custom Hook

➪ Custom Hook in React for calling API — useApi

➪ Using “useState” Hook in React Custom Hooks

Counter Component
useDocumentTitle hook
using redux methodology
using Hooks methodology

➪ how to use Redux with React Hooks.

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.