DEV Community: mohamed farid

Use "console.log" with objects becomes tricky

mohamed farid — Fri, 06 Jan 2023 02:30:21 +0000

Hi, sometimes there is a problem with using consle.log to log objects, let's discuss it.

Problem

So firstly this happen only with logging Javascript Objects

how to generate the issue?

const ourObject = {
    property: "property_value"
}
console.log(ourObject)

In this situation the expected console output should be something like this

But what if we have another function that run after this code and make some changes for our object


const ourObject = {
    property: "property_value"
}

console.log(ourObject)

function updateObjectFn(obj){
     obj.property = "property_value_updated"
}

updateObjectFn(ourObject)

The expected output for the console log here should be the same as the prvious console.log result as we call updateObjectFn after console.log(ourObject)

But the log will be something interesting it will show the property as updated even we have updated it after log

So what is happening, most of the browsers show on the console the current state of the object on the memory not the object at the time of logging it.

And that happen special with object as it Mutable
Same issue happen with arrays as it also objects on Javascript

Solution

In fact there is many solutions for this situation

1. Pass update function a copy of the object to avoid data mutation

for simple objects we can do shallow copy using destructing

const ourObject = {
    property: "property_value"
}

console.log(ourObject)

function updateObjectFn(obj){
     obj.property = "property_value_updated"
}

updateObjectFn({...ourObject})

if the object is nested we can use some utility tools like Lodash function deepClone

const ourObject = {
    property: "property_value",
    nestedProperty: {
           key: "key_value"
    }
}

console.log(ourObject)

function updateObjectFn(obj){
     obj.property = "property_value_updated"
     obj.nestedProperty.key = "key_value_updated"
}

updateObjectFn(_.cloneDeep(ourObject))

NOTE: take care about coping too many objects as increase the usage of the memory

By the end Will discuss another approach to avoid mutations without having a deep memory effect.

2. By making Stringify copy of the object

Make a stingify copy of the object before logging it.

const ourObject = {
    date: new Date() ,
    property: "property_value"
}

console.log(JSON.parse(JSON.stringify(ourObject)))

function updateObjectFn(obj){
     obj.date = new Date("1/1/2022")
     obj.property = "property_value_updated"
}

updateObjectFn(ourObject)

Although, it loses some information about the properties on the object of some data types as Example Date here.

3. Use immutable data types.

There is some Javescript package that provide immutable data types
on an elegant way without having deep effect on the memory usage.

Examples: immutable-js Immer

Same Problem with React devTools.

you Might face this same problem with React devTools
As this screen as the devTools show that the object as
Updated but it is not updated on the screen.

This issue happen if the state of the application updated directly
without using setState method

As this example here

I think that it, Thanks for reading I hope you enjoyed going throught it🙂.

Any feedback would be greatly appreciated.

Combine class component and functional component React

mohamed farid — Thu, 28 Oct 2021 00:10:44 +0000

Using Functional Components in react become the most popular way to create react Components, sometimes I feel like I want to use a
class component lifecycle functions but still want to get benefits from react hooks

it is simple tutorial about how to use useEffect hook as lifecycle functions in react.

lets start with the most simple one componentDidMount()

will not write too much to describe the code I will try to name functions to describe it.

you can create it easily

    useEffect(function componentDidMount(){
        console.log("%c componetDidMount","color:green;")
    }, [])

to add componentWillMount() just add it as returned function for componentDidMount() Like

    useEffect(function componentDidMount(){
        console.log("%c componetDidMount","color:green;")
        return function componentWillUnmount(){
            console.log("%c componetWillUnmount", "color:red")
        }
    }, [])

the next one will be a compine between componentDidMount() and componentWillMount()
it will be componentDidMountAndCompontDidUpdate() yeah it is not from react lifecycle component but will help to understand useEffect

    useEffect(function componentDidMountAndCompontDidUpdate(){
        console.log("%c componentDidMountAndCompontDidUpdate","color:teal;")
    })

this function with no deps array will run twice in the rendering of the component. it will run at mount and after this it will run at update, This component will run every time after any state change.

The remaining Function is componetDidUpdate() to build a componentDidUpdate you need to create mounted flag.
run function only in componet update and ignore run in componet mount

    const mounted = useRef()
    useEffect(function runComponentDidUpdate(){
        if(!isComponetMounted()) return;
        (function componentDidUpdate(){
            console.log("%c CompontDidUpdateForAnyVariable", "color:orange;")
        })()
    });

    useEffect(function lastUseEffect(){ // must be the last useEffect to check the component as mounted 
        signComponetAsMounted()
    }, [])

    function signComponetAsMounted(){
        mounted.current = true
    }

    function isComponetMounted(){
        if (!mounted.current) {
            return false
        }
        return true
    }

The whole code.


import React, { useEffect, useRef, useState } from "react";

function FuctionComponentLifeCycle(){
    const mounted = useRef()
    const [count, setCount] = useState(0)

    useEffect(function componentDidMount(){
        console.log("%c componetDidMount","color:green;")
        return function componentWillUnmount(){
            console.log("%c componetWillUnmount", "color:red")
        }
    }, [])

    useEffect(function componentDidMountAndCompontDidUpdate(){
        console.log("%c componentDidMountAndCompontDidUpdate","color:teal;")
    })


    useEffect(function ComponentDidUpdateForCount(){
        console.log("%c CompontDidUpdateForCount", "color:blue;")
    }, [count])



    useEffect(function runComponentDidUpdate(){
        if(!isComponetMounted()){
            return 
        }
        (function componentDidUpdate(){
            console.log("%c CompontDidUpdateForAnyVariable", "color:orange;")
        })()
    });

    useEffect(function lastUseEffect(){
        signComponetAsMounted()
    }, [])

    function signComponetAsMounted(){
        mounted.current = true
    }

    function isComponetMounted(){
        if (!mounted.current) return false;
        return true;
    }

    return (
    <div>
        Component Rendered
        <div className="">
            {count}
        </div>
        <button onClick={()=>setCount(count=> count + 1 )}> Add 1</button>
    </div>
    )
}

export default FuctionComponentLifeCycle;

NOTE Don't forget useState run async

Thanks for reading.

When not to use tailwindCss

mohamed farid — Wed, 06 Oct 2021 12:48:30 +0000

NOTE: This article from my perspective of view

tailwindCss

First tailwind is an awesome library and helps you a lot to be productive

tailwindCss is First utility library so what it essentially gives to You is just CSS properties converted to class so it easy to write and more quickly, the second thing it provides you with a very small bundle size

So When not to use tailwindCss

as we said tailwind provides you with just CSS properties.
you will not happy with it if you are already not good with CSS.
if you need ready styled components as ready Nav and card components tailwind will not be the best, yes there are components on the site but there isn't a lot of options.
if you don't need to implement a components from scratch

Simulate single page app using CSS selector (:target)

mohamed farid — Sat, 27 Feb 2021 21:00:50 +0000

hack the idea of SPA using :target css selector (it is a funny idea more than for actual use ) preview

why target selector, because it is the only selector that can understand the URL.

the target selector refers to the element with the id matches
the URL hash

the idea is to give every page id and hide all pages except the current target page

and you can still navigate between pages without javascript
or refresh the page as normal

to hide all pages except the target page

 .page:not(:target) {
   display: none;
 }

put nav to be fixed in all pages

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <a href="#posts">Posts</a>
</nav>

create pages that will be affected

<div class="page home" id="home">Home</div>
<div class="page about" id="about">about</div>
<div class="page posts" id="home">posts</div>

if the URL does not have hash push to the home page

if (window.location.hash === "") {
  window.location.hash = "#home";
}

to listen to the page change

window.addEventListener("hashchange", (e) => {
});

as example, if you went to get posts

window.addEventListener("hashchange", (e) => {
  if (location.hash === "#posts") {
    fetch("https://sitetogetposts/posts")
      .then((res) => res.json())
      .then(setPosts)
      .catch(handleError);
  }
});

you can check the full example here

Any feedback is appreciated 🤝