Reminiscing On My Software Development Journey

Shaydee Coder — Mon, 18 Oct 2021 13:48:30 +0000

It is funny how whenever I learn how to use a new technology, I always ask myself

When will I be confident enough to start building with this technology?.

I asked myself this question when I couldn't make websites responsive on all devices, and now I can build responsive websites without any issues.

Then, I started learning bootstrap, I asked myself this same question until I built a website with it by just studying their documentation one Sunday after I got back from church.

I got so good with bootstrap that it hurts me to see people say it can't do certain things, I'd volunteer to do that task using bootstrap which was said was unable to get the task done.

Do not say a technology is incapable of doing something, instead say you don't know how to get that task done with the technology. Not knowing how to do something with a technology does not mean the technology is incapable of getting the task done.

I've mentored a lot of developers on how to build responsive websites without having to jump through the hurdles I had to jump.

I knew what it was like to struggle with these technologies and wanting to understand them badly.

I guess this made mentoring others much easier for me.

I asked myself this question again when I started learning JavaScript, in fact, I gave up at this stage. I told myself software development wasn't for me.

Then I saw a tweet someone posted telling another person to register for an internship.

From the tweet, the so-called "internship" was actually a competition and not meant for beginners.

I also applied for the internship, what will I lose even if I get evicted at the beginning of the program? nothing, I'd lose absolutely nothing!

By the time I saw the tweet, I had already stopped studying and given up.

Two weeks went by and I didn't get evicted. I had submitted all my tasks before deadlines.

In the third week, we were splitted into teams and my team was to build five hotel website templates.

I led the sub-team that developed three out of five of the templates we were given in two days.

After we were done with our task, we were free for the week so we decided to introduce ourselves and get to know each other.

You're surprised, right? Yeah, I know. The internship was so intense that we didn't have the time to start introducing ourselves in the beginning because no one wants to be evicted.

So, while we were getting to knowing each other, somebody said he had to google some of my code to understand what I did.

This person was somebody I was looking up to because my JavaScript knowledge was zero at that time and the code he googled to understand was just CSS.

I thought everyone coding JavaScript had already mastered CSS, so I was surprised why he had to google to understand the CSS code written by someone who had given up and stopped studying.

It was at this moment I told myself I cannot give up just yet. During the internship, I saw a lot of people who were looking up to me also.

"I can't let these people down by giving up", so I said to myself. So after the internship I went back to JavaScript and I conquered, no still conquering, I mean. But I'm comfortable and confident enough with vanilla JavaScript now.

I'm learning #React now, and I'm asking myself "when will I be proficient and confident with it?"

This was what I asked myself last week before remembering I once asked myself this when I was struggling with CSS media queries, then bootstrap, and then JavaScript.

React Hooks - Understanding the useEffect Hook

Shaydee Coder — Sat, 11 Sep 2021 08:02:40 +0000

Since I started working with React Hooks, I've finally had a grasp of how useEffect works.

If you already have experience working with the life-cycle methods in class components, useEffect shouldn't be difficult for you to understand.

Just as in a class component, useEffect uses the different phases of a component's life-cycle in a functional component. If you're wondering what the life-cycle phases are, here you go;

Initial Rendering/Mounting Phase
Updating Phase
Unmounting Phase

Initial Rendering/Mounting Phase

This is the phase when the component is about to start it's life journey and make it's way to the DOM.

Updating Phase

Once the component gets added to the DOM it can potentially update and re-render only when a prop or state change occurs.

Unmounting Phase

This is the final phase of a component's life-cycle in which the component is removed from the DOM.

The useEffect function accepts two parameters, a call-back function and the life-cycle phase as a second parameter i.e when you want the call-back function to be executed.

The second parameter could be left empty, and if you need to add a second parameter, it would always be an array. Either an empty array or an array containing a piece of state.

Whenever an empty array is used as a second parameter, it means the call-back function inside the useEffect should be executed in the initial rendering phase e.g.

useEffect(() => {}, []);

When an array holding a piece of state is used as the second parameter, it means the call-back function should be executed in the initial rendering phase and also in the updating phase i.e when the state in the array is changed or updated e.g.

useEffect(() => {}, [data]);

When a second parameter is not declared, it means the call-back should be executed in the initial rendering phase and whenever ANY state is changed or in the initial rendering phase and EVERYTIME the component is updated e.g.

useEffect(() => {});

Now let's discuss the unmounting phase of the useEffect Hook, this hook returns only one thing which is a function, it doesn't return any other thing except a function. Before proceeding with the unmounting phase, let's discuss in details about useEffect and asynchronous functions.

The useEffect hook doesn't accept an asynchronous function as a callback function. If you need to use an asynchronous function in useEffect, then you will have to use it in a callback function and not directly, as a callback function e.g.

useEffect(() => {
    // Your asynchronous function here inside the callback function
    async () => {}
});

Let's get back to the unmounting phase of useEffect, remember that this hook only returns a function, this returned function is not called immediately whenever useEffect is executed. This returned function is stored in memory and only runs just before another execution of the same useEffect where the function was returned.

Let me walk you through an example that will help you grasp the concept more;

useEffect(() => {
    console.log("1. The useEffect logic");

    /* The unmounting phase */
    return () => {
         console.log("2. The unmounting phase");
    }
});

The above code snippet would log to the console 1. The useEffect logic in the first execution of the useEffect callback function. Now, because the useEffect has been executed once, the returned function is then stored in memory waiting for the useEffect to be executed for the second time.

// Console output
// 1. The useEffect Logic

When the useEffect is executed the second time, the returned function stored in memory during the first execution would then be executed before running the second execution of the useEffect hook. Now, the console output would look like this:

// Console output
// 2. The unmounting phase
// 1. The useEffect logic

After the second execution, the returned function is then stored again in memory patiently waiting for another useEffect call to trigger its execution, and this is how the cycle goes on over and over again.

Wow! You read it all till this point 😊, I hope this was helpful understanding how useEffect work in a functional component?

Thank you for reading this far 😊

DEV Community: Shaydee Coder

Reminiscing On My Software Development Journey

React Hooks - Understanding the useEffect Hook

Initial Rendering/Mounting Phase

Updating Phase

Unmounting Phase