• useCallback and useMemo
• Lifting State Up
• State of our ToDo
• UI Components

useCallback hook that is used ti memoize a callback function to prevent it from being recreated on each render.

React components are re-rendered when the state or props change.

const myFunc = useCallback(callbackFunction , [deps])

The useCallback second argument dependencies is crucial, it specifies when the memoized function should be recreated.

If any of the dependency in the array changes between the renders the memoized function will be recreated, otherwise the previous will be used.

React components re-render when the props or state is changes, this is expected but it can also recreate some complex calculations that are not required and lead to performance issues.

useMemo is a hook that memoizes the result of a function or computation, It has two arguments

const myVal = useMemo(() => complexCalc(v) , []);

First one is the function that computes a value and then the array of dependencies

Best Practises:-

• First profle the application, is it worth adding the memoization?
• Don’t over use the memoization, only use it for values that are actually expensive to calculate.
• Make sure that the dependencies provided are the actual ones you are using, don’t lie about dependencies.

The process of lifting a component’s state to the common ancestor so that other cousin components can use it is known as Lifting State Up.

Components are designed to be modular and reusable, but there can be situations where multipel components may need to access same data.

Lifting state up is a react pattern that involves moving shared state from child components to a common ancesstor

In my app, the task controller and task component were using the same state, so I create a new parent component as todo and passed the state to them as props

const ToDo = ({ heading }) => {
	const [todoList, setTodoList] = useState([]);
	return (
		<div className="d-grid justify-content-center vh-100 align-items-center">
			<h1>{heading}</h1>
			<div className="list-group">
				{todoList.map((task, i) => (
					<Task key={i} task={task} onDelete={removeTask} />
				))}
			</div>
			<TaskInput onAdd={addNewTask} />
		</div>
	);
};

So, I decided to use 3 attributes of our task id,name and done

{
 "id" : 0,
 "name" : "complete this asap",
 "done" : false
}

And create an array to store all the tasks.

We can use cookie db to store the tasks and fetch them again when use refreshes the page, currently the tasks are also refreshed so we have to work on that.

Links refered today:

• https://dmitripavlutin.com/react-usecallback/
• https://dmitripavlutin.com/react-usememo-hook/
• https://blog.jakoblind.no/css-modules-webpack/
• https://overreacted.io/before-you-memo/