Vivek Kumar Maskara maskaravivek

Tips for Optimizing Performance when Using React Hooks

React Hooks are a great way to manage state and side effects in React components, but they can also cause performance issues if used incorrectly. This article will provide some tips on how to optimize performance when using React Hooks.

Using the Effect Hook – React

Use the useEffect Hook

The useEffect Hook is a great way to manage side effects in React components. It allows you to perform side effects without having to manually manage the component lifecycle. It also allows you to optimize performance by only running the side effects when certain conditions are met.

	async function pushChangesToGithub(
	githubAccessToken,
	commitTitle,
	githubRepoFullName,
	githubRepoBranchName
	) {
	try {
	const articleFiles = [
	{
	path: "/my-new-website/index.html",

	[
	{
	"path": "/my-new-website/index.html",
	"content": "Hello World!",
	"encoding": "utf-8"
	},
	{
	"path": "/my-new-website/images/logo.png",
	"content": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQ",
	"encoding": "base64"

	const createGithubCommit = async (
	githubAccessToken,
	repoFullName,
	branchName,
	commitMessage,
	articleFiles
	) => {
	const tree = await createGithubRepoTree(
	githubAccessToken,
	repoFullName,

	const updateGithubBranchRef = async (
	githubAccessToken,
	repoFullName,
	branchName,
	commitSha
	) => {
	const payload = {
	sha: commitSha,
	force: false,
	};

	const getParentSha = async (githubAccessToken, repoFullName, branchName) => {
	const parentResp = await fetch(
	`https://api.github.com/repos/${repoFullName}/git/refs/heads/${branchName}`,
	{
	method: "GET",
	headers: {
	Accept: "application/vnd.github+json",
	Authorization: `Bearer ${githubAccessToken}`,
	"X-GitHub-Api-Version": "2022-11-28",
	},

	const createGithubRepoTree = async (
	githubAccessToken,
	repoFullName,
	branchName,
	articleFiles
	) => {
	const shaForBaseTree = await getShaForBaseTree(
	githubAccessToken,
	repoFullName,
	branchName