Photo by Peter Mason on Unsplash


What are the updates in My Digital Garden in Jan 2023

Every month I give updates on my digital garden. In January, I focused mainly on trying Client State Management methods and useEffect Timer usage.

4 min readJan 27, 2023


I have wanted to improve the Menu Structure in my Digital Garden for a long time. I completed this work today. Below I describe how I handled this issue.

I slightly changed this structure using the Prime React Mega Menu in this part. In its current state, I have grouped apps into Content History and Blog.

  • Apps
  • Date
  • Blogs
New Mega Menu

A. State Management

I had to create a playground for myself to try different State Management environments. Let's say we have a component in this playground, for example, a counter component. Let this component consist of 2 parts.

  • An Inc Button
  • A Value Displayer
Button and Displayer

I want to create a separate layout using this component. In other words, let's examine the processes we do to move data, even under hierarchically different remote nodes, and the components they affect.

Hierarchical Representation of the Structure

Here, only Inc and ValDisp components that have State communication that interests us, Main, Counter, CompA, CompB, CompC Layout, and objects that have nothing to do with the State.

Let's complicate the situation more and do it using 2 Counters. Let's show that State can operate more independently. The result is an image like the one below.

Sample Playground

And below you can see different trying about different state management methods and libraries

1 . State — Props Drilling

I wrote an article about props drilling. You can read ➡️ Blog

2 . State — Context

I wrote an article about React Context. You can read ➡️ Blog

3 . State — Zustand

I wrote an article about React Context. You can read ➡️ Blog

4. State — Jotai

I wrote an article about React Context. You can read ➡️ Blog

5. State — Redux Connect — NoCode

I wrote an article about React Context. You can read ➡️ Blog

6. State — Signals

I wrote an article about React Context. You can read ➡️ Blog

B. useEffect Timer Usage

There are two mechanisms that we use over the JavaScript timer. One is the Timeout function we use if we want an operation performed after a certain period, not at the moment.

setTimeout(callback, delay) -> id

If we want it to work continuously at certain intervals, then Interval functions are found.

setInterval(callback, delay) -> id

What if we want to use these functions inside a React component? We have to use them in effect and unsubscribe them while the component is unmounting or the useEffect-dependent dependency structure is changing.

When I say unsubscribe, I'm talking about → clearTimeout or clearInterval calls.


useEffect(() => {
const id= setTimeout(() => {
console.log('It will run after 3 second!')
}, 3000);
return () => clearTimeout(id);
}, []);


useEffect(() => {
const id= setInterval(() => {
console.log('It will run every 3 second!');
}, 3000);
return () => clearInterval(id);
}, []);

If we do not do this, we can see it in our “useEffect” side effect application. In other words, even though the component is not rendered at the moment or the “useEffect” structure has changed, the effects using the old structure will continue.

Continue to read ➡️ Blog

7. Hooks Use Effect 02(setTimeout/useTimeout)

8. Hooks Use Effect 02(setInterval/useInterval)

Let’s continue reading 😃

You can find similar samples and writings at this link. If you like this story. Please 👏👏 and share