Production! Here we go!

When I got a job as a developer, all I wanted was a place to work and grow. In addition to that, I wasn't after the pay - needless to say - but I was ready to work for free as I only desired an environment to use previously acquired knowledge, and build amazing stuff. Call me naive (for not looking for money), but I have what I wanted, and a whole lot more😉🤭.

Last week Friday, the 13th of August, will forever be etched in my memory; a product my team and I have worked on in the past weeks moved to production(prod). This launched us into a brand new world of far greater responsibility and decision-making.

What is `production` and what does it entail?

There are different environments in the web development world. The first is called development: an environment where features are built and tested. The environment where such features are deployed to active customers for their usage is called production.

With new experiences come challenges, and moving to production isn't left out: With our app having users, it demands extra carefulness before deploying new features, but hey! we're up for the ride. In the end, I am most grateful for having found a sense of belonging in software engineering, and by the grace of my Lord Jesus, my all will be on display.

Last week on my learning journey

Last week, I added a new tool to my kit: the useEffect() hook.

React is built on the idea of components, and styling them can be hellish at times. Some cannot be styled by simply passing CSS on them, probably because they are from an API you're using(e.g. getStream) or have styles that are difficult to control in the environment they're being staged. Situations like this present a unique headache, one that requires a unique solution.

Thankfully, React has a powerful useEffect() hook that as its name, is used to make effect-related changes in your code. Although it must be said that inappropriate usage can cause a memory leak on the browser, causing the webpage that houses the hook to break. Below, I discuss what useEffect() is, what it does, and how it is used.

1. useEffect() is just as its name, for side-effects.

React components are structured to take props and state to render, depending on how the component is to be used. Although sufficient, components in React are built to be reusable, meaning some extra details might need to be modified where they are imported. An example of such modification includes tapping into the DOM(document object model), a process not directly accounted for in JSX. In such a case, a hook is necessary. step up useEffect().

How components render in React is a very tricky subject, and by my estimation, it would take a lifetime to fully get a hang of it, as use cases differ by the day. Although when React cannot be stopped when it decides to render a component, desired effects(or behaviors) can be introduced into such components using the useEffect() hook. These effects can be further decoupled to exist independently of the parent component, and their rendering behaviors structured as desired.

2. How is it used?

import { useEffect } from 'react';

A useEffect() hook is built to accept two(2) arguments: a function called "Effects" and an optional array of dependencies.

useEffect(function, [dependencies(either specific or not)]);

UseEffect () executes the first argument(function) after React has committed the component to the screen. This logically means one thing, that the useEffect() hook can work without a second argument. Although true, it comes with a bad experience, which takes me into a further explanation about the second argument, the optional dependencies.

Dependency is an optional array of dependencies. They are optional because they are either specific or not, i.e., they can target a particular thing or be left empty.

I consider different case-scenarios below:

CASE 1

useEffect(() => {
Some DOM manipulation
    });
}

Developer: run the DOM manipulation.
React: Okay, but how many times?
Developer: just run the code.
React: Okay. causes a re-render of the component until the browser can no longer take it, causing a memory leak and eventual crash of the page
Why this behavior? React keeps putting the effect into use over and over again, even without the page re-rendering.

CASE 2

useEffect(() => {
Some DOM manipulation
    }, []);
}

Developer: run the DOM manipulation.
React: Okay, but how many times?
Developer: only when the component itself re-renders.
React: Okay. renders the effect once unless there is a change in the component; a component serenader causes it to also re-render

CASE 3

useEffect(() => {
Some DOM manipulation
    }, [xxx]);
}

Developer: run the DOM manipulation.
React: Okay, but how many times?
Developer: once on page load, and listen to the dependency for changes. If any, re-render the effect.
React: Okay. renders the effect on loading of the page, listens to the dependency for changes, and if any, re-renders.

CASE 4

useEffect(() => {
Some DOM manipulation
    }, [xxx, yyy]);
}

Developer: run the DOM manipulation.
React: Okay, but how many times?
Developer: once on page load, and listen to the two dependencies for changes. If any in either, re-render the effect.
React: Okay. renders the effect on loading the page, listens to both dependencies for changes, and if any, re-renders.

This last example also gives an insight: the useEffect() hook can take either zero or more than one dependency. How they(dependencies) are structured depends on the desired output of the effect.

N.B: useEffect() executes the first argument(function) only if the dependencies have changed between renderings.

Would you like to read more on the useEffect() hook, I gladly recommend these two posts titled "You don't know useEffect" and "React useEffect explanation".