React’s useEffect and useState Hooks

Vikrant Patel — Sun, 08 Oct 2023 23:52:56 +0000

useEffect and useState are React's most useful hooks. Let's drill down to understand the use of it.

useState

Follow through the example above:
First, you must import the destructuring useState hook from React.
Then we call the useState hook from within the counter function. The React useState returns the Value of '0' and the Counter function updates it with count and setCount.

In Short,

The React Hook useState accepts the assigned state and returns two values:
1) The current state.
2) A function that will update the state.

The fun fact is that useState Hook can be declared with any type of state variable and can be used multiple times in a single component.

useEffect:

You must be familiar with fetching data, and updating DOM and timers, these side effects in your component can be handled by useEffect Hook in React as well.

But there is a catch here,

useEffect runs on every render. In the above example when useEffect is hooked the count will change, app rerender and then triggers one after another effect.

To avoid this behavior we should always include a second parameter that accepts an array. Optionally, pass dependencies to useEffect in this array.

Let's look at some examples;

No dependency passed:
An empty array:

Props or state values:

for initial rendering:

If the count variable updates, the effect will run again:

Effect Cleanup:

Some side effects require no re-use factor, such as timeouts, and event listeners.
Including the return function at the end of the useEffect will dispose of the purpose of re-rendering.

Example:

📦~Flexbox~📦 {"Java","HTML","CSS"}

Vikrant Patel — Sun, 23 Jul 2023 00:32:37 +0000

Just like the name 'Flex'~'Box', Flexibility in the given Box(flex container) .

I think it's a self explanatory word, to provide us with the flexibility in our layout and make it more responsive.
The main purpose of this post is to get familiarized with the main properties of Flexbox. There are many more out there to explore but that will be a little bit too much if I go through all of them.

Once you master it, I think the rest of the properties are just as easy as it gets.

5 Most basic properties of Flexbox, that is what we are going to dive into...

To make this happen, firstly we need to let the container apply its default value to distribute their children on its own including size and space between them.

No.☝🏼-display:flex

The default value of Flexbox is the block property of the children elements.
Here is the 3 span flex items; with its default value(Display:Block)

Block VS Flex:

Did you notice the effect of Display:Flex?
By simply applying Display:Flex, elements expanded to their available space in the container.

No.✌🏼-flex:direction

A Flexbox container has two axes: Main Axis & Cross Axis

By default, elements are arranged along the main axis, from left to right. This is why the elements are laid horizontally once display:flex has been applied and on the other hand flex:direction rotates the main axis.

This property is used to change the direction of the elements. The default value is set to row and additional value can be set to row-reverse, column, column-reverse.

Row VS Column:

Here the main axis moved from a horizontal to a vertical position.

Now let's reverse the elements 🔄
There are two options for that: row:reverse & column:reverse

No.❸-Justify Content

For this property 'main axis' is the playground, all the movement is around the main axis only.
The default value for this is flex-start and additional values are flex-end, flex-center, space-between, space-around, and space-evenly.

No.4️⃣ Align Items:

Align items is comparable to justify-content but it operates along the cross-axis. It automatically defaults to stretch and additional values are flex-start, flex-end, center, and baseline.
Remember, the start, end, and center operate the same as justify-content but on the cross-axis. Whereas stretch makes items take entire space of the cross-axis.
For the baseline, flexbox items align themselves at the baseline of the cross-axis. If there is a text tag on the items, then the text will be aligned to the horizontal line.

for the centering of elements and to meet the main-axis and cross-axis intercept point.

flex-direction:row ; justify-content:center ; align-items:center

flex-direction:column ; justify-content:centre ; align-items:centre

No.⑤ Flex wrap:

To avoid overflowing the items issue this can be a cheat code, if the item's size is too big for the available space, it will overflow and that is where this code comes in handy.

I was going to discuss only 5 properties but couldn't resist the temptation of sharing the fun one!
sorry..!!

and probably the most useful one.

Align-Self
Align-self gives freedom to manually manipulate any of the particular items from the multiple items.
Align-self property accepts flex-start, flex-end, center, baseline, and stretch.

========================================================

"You are here that means You are making a difference."

Until next time...
Happy Coding..!!

If you liked the post, pls do hit💖

DEV Community: Vikrant Patel

React’s useEffect and useState Hooks

useState

useEffect:

📦~Flexbox~📦 {"Java","HTML","CSS"}