DEV Community: Jefferson Osagie Iyobosa

React useEffect hook delays before updating after dispatch

Jefferson Osagie Iyobosa — Thu, 11 Jun 2020 08:02:21 +0000

I'm currently working on a side project, an app like unsplash.com

I have been able to get most of the features done, however I'm not satisfied with the performance I get when opening an image in a modal window for larger view.

This issue starts when I have mapped through a large array of data, thereby creating numerous photo component-

//Components

//For holding the image and the actions related to it
//It has an event listener to dispatch the current photo ID to State
<PhotoComponent payload={...}/>

//For creating a dialogue overlay for showing currently viewed image
<Modal />

//The component for loading the currently viewing image
//Has a useEffect() to listen to state so it renders the current image ID in state
<View payload={...}/>

//Liking the photo
<Like />

//Adding photo to collection
<Collect />

So basically all these components are wrapped inside the PhotoComponent. And when I map through the photos array-

const photos = [...] //Where length is over 100
photos.map(p=> <PhotoComponent payload={p} />)

And click on an image, it is supposed to dispatch to state the clicked image ID so that I retrieve that ID in state.
However this event is dispatched and state updated with the image ID.

However, the useEffect() hook takes time (about 2-3sec depending on how much the photos are) to update the with the value from state.

This is really impacting on the app and making it slow to render. I am learning React and I can't think of a better way to solve this.

I'm sorry if I'm not being descriptive enough.

Summary is:

Click on a photo
Dispatch an action to update state with the photo's ID
Opens up a modal to load the image whose iD was dispatched in 1 above

The problem is the modal component delays before it is updated with the item in state (useEffect())

And if the photos are over 200, it takes even more time to effect.

My observation is, it seems there is a loop running through all the images before the update is done.

I need help please, can't seem to figure this out. Thanks

JavaScript and CSS progress bar

Jefferson Osagie Iyobosa — Wed, 26 Feb 2020 10:34:39 +0000

I recently created a simple progress bar with vanilla JavaScript and CSS.

It's not really a big deal. But someday when you might need something like this, instead of spending time building again, just remember one exists here already:

https://frontend-io.github.io/Vanilla-JS-and-CSS-progress-bar/

Your use case might be different however, but I think same logic may apply.

    <div class="cont">
        <div class="loader">
            <label class="counter">Profile is <span>0%</span> complete</label>
        </div>
    </div>

Adding css- there isn't really much here, just some styling and some tweaks with CSS psuedo class.
The darker pulse that follows later after the bar is loaded is fine with the CSS psuedo ::after class

    .cont{
        margin-top: 30px;
        height: 20px;
        width: 100%;
        background: rgba(0, 200, 0, .3);
        border-radius: 50px;
    }   
    .cont .loader{
        height: 20px;
        position: relative;
        box-sizing: border-box;
        width: 0%;
        background: rgba(0, 200, 0, .8);
        border-radius: 50px;
        transition: width 1.5s linear
    }
    .cont .loader:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: 50px;
        width: 100%;
        background: linear-gradient(to  right, rgba(0, 200, 0, .3), rgba(0, 100, 0, .8));
        animation: purge 4s infinite ease-out
    }

    @keyframes purge{
        0%{
            opacity: 0;
            width: 0%;

        }
        50%{
            opacity: .5
        }
        100%{
            opacity: 0;
            width: 100%;
        }
    }
    .cont .loader label{
        font-size: 12px;
        position: absolute;
        right: -10px;
        text-align: center;
        top: -25px;
        font-weight: 600;
        transition: .3s;
    }
    .cont .loader:after{
        content: "";
        position: absolute;
        top: -10px;
        right: 0px;
        height: 50%;
        width: 2px;
        background: rgba(0, 200, 0, .8);
    }
    .cont:hover .loader label{
        transform: scale(1.5);
        transition: .3s;
    }

And lastly our JavaScript

window.addEventListener("load", loadProgress)

  function loadProgress(){

    // Get DOM element
    const target = document.querySelector(".loader")
    const counter = target.querySelector("span");

    // Sample form data
    const details = {
        name: "Jefferson",
        age: 12,
        weight: 70,
        level: 30,
        relationship: "",
        contact: "",
        email: "",
     friends: 459
    }


    function getProgress(board){
        let maxLength = 100;
        // Put them into array to get length of form
        let lengthOfBoard = Object.values(board).length;

        // Get possible mark of each field
        let jumps = maxLength/lengthOfBoard;
        let progress = 0;
        for (let field in board){
            // If field is filled add it's mark to progress
            if (board[field]) {
                progress += jumps
            }
        }
        return progress
    }

    // Utilise value calculated from loader
    function implimentLoad(){
        // Simulate a delay
        setTimeout(()=>{
            let progress = Math.round(getProgress(details))
            counter.innerText = `${progress}% `;
            target.style.width = `${getProgress(details)}% `
        }, 1000)

    }
    implimentLoad()
  }

I hope you find this useful...

Quick question- what happens when you push an array into itself?

Jefferson Osagie Iyobosa — Fri, 08 Nov 2019 18:56:23 +0000

So today I was working on something that I had to push a value into an array, but I mistakenly pushed the array itself into itself 🤫🧐🤫. How more confused could that be...

But then the result was stunning as I wondered what I had done wrong.
The script returned an array of arrays which seems to be infinite.

An array inside an array inside an array... continuously.

Just as that was strange, but it was interesting to see what was happening there.

However I still don't understand how that happened. So I'd be glad if anyone can explain or give me a hint what happened.

Created a handy JavaScript Label creator

Jefferson Osagie Iyobosa — Fri, 08 Nov 2019 18:49:59 +0000

So recently a friend requested a label creator like that of the popular CSS framework- Bootstrap, semantic etc. I remembered I had started working on something like that few days ago, this prompted me to finish it up for him and others who might need it.

This post isn't really about the tutorial on how I made it, but just to share my source code and if anyone is interested for tutorial post, I'd gladly great standard one.
See the preview below along with the GitHub repo;

This can be helpful for anyone here. Feel free to use.

Preview: https://jeffersoniyobosa.github.io/JavaScript-Label-tags-creator/

View code: https://github.com/JeffersonIyobosa/JavaScript-Label-tags-creator

Pull: git@github.com:JeffersonIyobosa/JavaScript-Label-tags-creator.git

Redesigned it from scratch, no plugin, just HTML CSS and vanilla JS.

I hope you find it useful. 🙌🏼
Do leave a 🌟 star 😁

Forcing CSS animation on dynamic containers with Javascript

Jefferson Osagie Iyobosa — Wed, 25 Sep 2019 14:18:13 +0000

Hey there! Recently i made a post about how to make content containers toggle heights or widths with transitions, this is an update to the post.

Most times when we try to build things like accordions, collapsible Navbars or anything that toggles heights or widths, we often find out that the animation never works when we try to set the heights or widths to auto. So instead of smoothly stretching back and forth, it just snaps. Yuk!
As an alternative sometimes, we instead use fixed values. But then using fixed values has its setback as it would truncate overflowing contents if the container is dynamic.

Well, the reason behind the animation issue is very well explained here by w3: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Specifications
So let's skip all these reasons it shouldn't work and lets see how to fix it!
We begin by adding some HTML to populate the container:

//The button element would be used as our toggle 
<div class="navigation">
   <button class="knob">Toggle Height</button>
   <div class="content">
    <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    </p>
   </div>
</div>

Then a little styling

.navigation{
        max-width: 300px;
        font-family: poppins;
        padding: 15px;
        border-radius: 50px;
        transition: .5s;
    }
    .navigation .knob{
        width: 100%;
        border: none;
        background: -webkit-linear-gradient(left, #5efce8, #736efe);
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        padding: 20px;
        text-align: center;
        box-shadow: 3px 5px 3px rgba(0,0,0,.09) ;
        transition: .5s;
    }
    .navigation .content{
        overflow: hidden;
        transition: .5s ease-out;
        background: #fff;
        box-shadow: 0px 20px 20px rgba(0,0,0,.05);
    }
    .navigation .content p{
        overflow: hidden;
        color: #555;
        background: #fff;
        margin: 20px 0px;
        box-sizing: border-box;
        padding: 20px;
    }

Then we add the JavaScript

 //Get the elements
    let knob = document.querySelector(".knob");
    let content = knob.nextElementSibling;
    // Get the full height of the container
    let defaultHeight = content.scrollHeight;

    knob.addEventListener("click", () => {
        // Check if the current height of the container is same as it's original height
        (content.style.height == defaultHeight + "px") ? 

        // If the condition above is true, set the height to zero (toggle close)
        content.style.height = "0px" : 

        // Else make the height stretch to its full height ( toggle open) 
        content.style.height = defaultHeight  + "px";
    })

And voila! That's all. With that little code, we have a fully functional toggling dynamic container. The same principle used here is applied to widths:
So instead of scrollHeight, we use scrollWidth.

 //Get the elements
    let knob = document.querySelector(".knob");
    let content = knob.nextElementSibling;
    // Get the full width of the container
    let defaultWidth = content.scrollWidth;

    knob.addEventListener("click", ()=>{
        // Check if the current width of the container is same as its original width
        (content.style.width == defaultWidth + "px") ? 
        // If the condition above is true, set the width to zero (toggle close)
        content.style.width= "0px" : 
        // Else make the width stretch to its full width ( toggle open) 
        content.style.width = defaultWidth  + "px";
    })

-final

I hope this helps you get over that snapping heights and widths. Feel free to ask questions if you find any part of this foggy :)

Why does angular seem to ruin my CSS immediately it's on a live server?

Jefferson Osagie Iyobosa — Wed, 11 Sep 2019 09:44:25 +0000

This is seriously not funny. Spending hours writing styles only to deploy and see your styling ruined. Has anyone come across this? What could be the problem and how did you fix it?