REACT DIGITAL GARDEN
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.
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
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
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.
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.
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
clearTimeout(id)If we want it to work continuously at certain intervals, then Interval functions are found.
setInterval(callback, delay) -> id
clearInterval(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.
setTimeout
useEffect(() => {
const id= setTimeout(() => {
console.log('It will run after 3 second!')
}, 3000);
return () => clearTimeout(id);
}, []);setInterval
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
