😌To do this, I knew that I had to get the host and port values in order to access it from my phone's browser. so I checked my console to see what host I could use and saw that my app was hosted on http://0.0.0.0:5173 and http:/localhost:5173 (💁‍♂️yes it's built with Vite). but none of them looked like an IP address I could access from an external device(💁‍♂️basically to access a device's resources on a network, you need to request it through the device's public Ip address on the network. 0.0.0.0 and localhost are not public). Some of you might see something similar to http://192.164.43.40:5173 in your console, that is likely to be the address you should use.

🙃To get my public IP address I ran the ipconfig command on a new console screen and it showed me my PC's public IP address

💁‍♂️so I copied the address and slapped the app's port at the end to have something of this form http://192.168.43.40:5173, and ran it on the browser in my mobile phone, and then waited for it to load... and ⏰waited... and waited...⏰ and a minute later the browser gave up and displayed a connection timed out error message🤦‍♂️😒.

😔well, I was not really happy but that was not a big deal,🤷‍♂️I am a dev and so am used to errors being slapped at my face like that, so I began to think what could be wrong? did I copy the IP address incorrectly? - No, did I copy the port number incorrectly? - No, did I use HTTPS instead of HTTP? - No. therefore the problem must be hidden somewhere else.🤔

🌈And so I thought and made some research after which it came to my attention that I needed to check my network profile settings, because if my network profile was set to "public", it wouldn't be discoverable by other devices in the network(🥸which I found pretty counter-intuitive by the way, I would love someone to help me explain why it's so) and in contrast, if my network profile was set to "private" it would be accessible by the other devices on the network. And so I checked my settings by:

• ✅ opening the settings app on my Windows 11

• ✅ selecting Network & internet (on the left nav bar)

• ✅ selecting Wi-Fi (on the right viewport)

• ✅ selecting <my-wifi-name> properties (<my-wifi-name> shall be replaced by your wifi connection name)

🤷‍♂️and voila... there it was, my network profile was set to "public"

so all I had to do now is switch it from "public" to "private" right? I did, restarted my app, and by the way I was now proposed to access the app from https://localhost:5173 or https://192.168.43.40:5173 which was now a good sign right?😌

yea, I went on my mobile device, copied the URL containing the IP address as indicated above, and ran it in my browser. and ⏰waited... ⏰waited... and ⏰waited... and a minute later, my browser gave up again and showed me a connection timed-out message for the second time, oh gosh... I was bitten.😔

But - a real warrior hmmm I mean develop... I mean Enginee... - sorry, but you get the point🙊. a real programmer does not give up so easily. So I continued searching for what could be the thing that stops my phone from accessing my PC's resources through the network and after a few more moments of reflection, It came to my attention that, the firewall could be the issue here. so I went on to check that out by clicking on the "Configure firewall and security settings" below the network profile settings from earlier which led me to the app that manages my firewall settings, this might vary depending on what you use so I will not go into the details of how I went from here but it should be pretty straight forward, you m need to make a little bit of research for your specific situation.

🤓and so I made the check on my firewall settings, and it was on, and therefore was at the origin of my problems. At this point, all I needed to do was to disable the firewall, and try again, and I did.

I then went back to my mobile browser and ran the URL again. and waited, and w.. wait it worked! it wooorked!!!🥳🥳🥹🥹

Conclusion

🛣️And that's my journey on how I solved my phone not accessing my React app from my PC. The moral lesson here is that for every problem, there always is a logical solution, as long as you don't give up, you'll find it.
That said, see you in the next article, and until then, Happy coding!😉

Hey hey, WhatsUp!!!

Let me give you some context here.

Imagine, there you are, in front of your computer, trying to solve a problem that has been disturbing you for quite a while now, you are fed up and now want to change the strategy, instead of going on with the brainstorming, you resolve to research on google. you get to your web browser and type on the search “google.com”, then a few clicks and scrolls later, you can finally copy and paste the solution to your problem. now if you didn't know, you probably have just made use of the DNS right there.

Introduction to DNS

What is DNS?

DNS stands for (domain name services) which when translated to English just means a service that makes websites have user-friendly addresses.

You probably already know that the internet is the interconnection of millions of computers and servers around the world (if you didn't then now you do), and for data to circulate in this mushy mess of a network in all reliability, all of these devices must have unique identifiers or addresses, at the computer level these addresses are known as Ip addresses and are just a series of digits of the form 204.0.45.88.

Since the internet is meant to be used by humans, it is not obvious that people will willingly memorize a unique series of digits for each and every web service that they wish to access (given that I had a hard time memorizing my own phone number), there was therefore a need to make these addresses more human appealing thus the birth of Domain names, which in other words are human understandable names that are being mapped to IP addresses of web servers by, you guessed it, The DNS.

How does DNS work?

it all starts when you click on the enter button after typing a domain name like “google.com” in your browser’s search bar. These are the processes that occur thereafter.

• the browser checks if it has the corresponding IP address for that domain name in the cache. if it does, it will directly make the query to the server at this address (in this case the DNS will not be involved), if not it will make a query to a local DNS resolver.

• there are two types of DNS resolvers, iterative and recursive resolvers. your query will most likely be made to a recursive resolver so we will go with that for now.

  The recursive resolver will make a query to a root nameserver around the globe, this server contains the information about top-level domain nameservers(TLDs) which are servers that holds information about domain names with the same top-level domains for example .com, .dev, .org, etc.

• the root nameserver will make a query to the top-level domain nameservers that correspond to the domain name. this server will give information about the authoritative nameserver that has the information about this domain name, the authoritative nameservers are servers that contain detailed information about domain names including their IP addresses.

• Finally, the authoritative nameserver returns the required IP address to the DNS resolver and the latter is sent back to the client which then finally makes the query to the server corresponding to this IP address.

Types of DNS resolvers:

There are two types of DNS resolvers:

recursive resolvers:

These resolvers follow the same process as detailed above, they initiate a query which is then called again multiple times by the different nameservers at the different levels of the nameservers hierarchy until the IP address is retrieved at the end.

This is a more effective pattern compared to iterative resolving because the path to the IP address is been determined effectively at every stage of the process and is not necessarily regulated or controlled by a central node or entity.

iterative resolvers:

Here, the resolvers follow a different pattern, it is like searching for a friend at a massive party, you ask John where Mary is and he tells you to ask Jake, then you ask Jake and he tells you to ask Lola and then you do before Lola tells you that Mary is right behind you(well… that's the best I could pull off as analogy for now).

In the same way, the resolver will query the root nameserver, then the latter will return information about the corresponding TLD server, then the resolver will now query the TLD server which will return the details about the corresponding authoritative nameserver(remember when I say corresponding here I mean in relation to the domain name for whom we are finding the IP address).

Finally, the resolver will query the corresponding authoritative name server which will return the desired IP address.

And then from there, the browser can now use this IP address to fetch the data or site it needs from the corresponding web server.

conclusion:

So now, I hope you have a better understanding of what DNS is and means, and that you will apply this knowledge to save the world(I mean… it's possible right?)

Yeah… there you go, leave your thoughts in the comments so I can learn from you too or answer your questions, and feel free to engage with me through my LinkedIn in my profile bio. till next time, happy coding.

So yea, you probably have or are about to start a react project, you know you are going to be interacting with a server, and so you are looking for the best way to do so given your needs. you probably have heard of React Query and you would love to get an overview of what it is and if it is worth it for your project. well, here I got you covered. This article is aimed at helping you understand the scope and purpose of React Query.

what is React Query

React Query is a library you can use to synchronize your react-app with an external factor(in most cases a web server). this library handles a lot of stuff out of the box that would be otherwise time-consuming and possibly tedious for some, things like caching data to optimize for performance, background fetching together with cache revalidation and invalidation to always have the up-to-date data on the screen, server state update by mutation with a developer-friendly API, including APIs for advanced implementations like pagination, and infinite scroll.

Having seen that the React Query library probably has all you need for your data fetching, let's get into some details.

setup

to get access to the React Query client, you need first of all to have your react app installed and all set (I will assume here that you already know how to set up a react app, however you can leave a comment if you wish that I write an article on that.), then we will install the React Query library with the following command;

$ npm i react-query

or with yarn

 $ yarn add react-query

now that you have installed it successfully, let's set it up in your project.

we will need to wrap the app or at least the portion of it where we would like to use the library in a QueryClient context provider passing in it a client property. this client is an instantiated QueryClient. we do it as below.

 import { QueryClient, QueryClientProvider } from 'react-query'

 const queryClient = new QueryClient()

 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <YourApp />
     </QueryClientProvider>
   )
 }

so now we are all set.

How to use.

we can therefore start using the library to fetch data from our server in any child component as below

import { useQuery} from 'react-query'

function YourApp() {
    //call the useQuery hook as below to make a fetch
   const { isLoading, error, data } = useQuery(
    //pass in a key to ease the caching process
    'repoData',

    //then pass in a callback function that will return a promise
    //that resoves with the data or throws an error 
    () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-                  query').then(res =>
       res.json()
     )
   )

    //use the isLoading flag to display the loading ui
   if (isLoading) return 'Loading...'

    //use the error ui to display the error ui
   if (error) return 'An error has occurred: ' + error.message

    //in most cases you can safely display your data if
    //both above flags get passed
   return (
     <div>
       {data}
     </div>
   )
 }

Yes! it's as straightforward as that.

so basically to make a simple request, you get to call the useQuery hook, passing in at least two parameters;

• the key

• and a callback

The key will serve as an identifier for the query, which is used by the caching system. the key can be either a string. or an Array of a string and any number of serializable objects(the latter can be used for nested resources and queries with additional parameters).

the second parameter is the callback function, which returns a promise that resolves in the data or throws an error.

The user query hook can also take a third parameter, which is the options object, which can be used to further determine the behavior of the data fetching.

conclusion

Hopefully, this was enough of a guide to give you a basic understanding of the React Query library and help you see how helpful it might be to you and possibly your team.

here is the link to their website if you want to learn more

if you have gone this far into the article, I want to say a big thank you and until next time.

happy coding...

The useEffect hook is a very used and thus popular hook in the react's ecosystem, it serves its purpose when used correctly but can represent a 'foot gun' when used incorrectly and so resulting in a lot of hate from some devs. Actually, the useEffect hook is less of a dangerous hook or tool, and more of a misunderstood one. In order to fully enjoy the potential of this hook, one must understand the initial purpose for which the hook was designed and published.

What is useEffect for?

1. The useEffect hook can be seen as an "escape hatch" as described by the React Docs Beta, this means that the useEffect serves as a portal through which you can synchronize your app's states with external systems, these could be a subscription to a server's services, a non-react widget, or other external services.

let's look at an example here. let's say we have an app that makes a connection with a server for a particular component, the connection might need some arguments like some id from the react component, and should always be in sync with these arguments. in order to create this connection and keep it in sync with our app's states, the useEffect hook would be suitable

const server = new Server()

export default function app({id}){

  useEffect(()=>{
    server.connect(id)
    return ()=> server.disconnect()
  },[id])

}

notice how I added the id prop to the dependency array so that the connection will always be remade when the id changes and thus always be In sync with the latest Id. Also, notice how I added a clean-up function to maintain consistency and avoid bugs caused by multiple unnecessary connection instances.

1. You could also use useEffect to fetch data from the server for use in your application, but it is mostly advised to use a framework for that task because while it is possible, the odds of you falling into issues like "race conditions", "untrue dependency array", and other issues are high. some frameworks that might serve the purpose here are,

   -react query

   -remix

   -useSWR()

   -and the use() function which is relatively new and cool.

What not to do with useEffect

Hopefully, you now understand that the useEffect hook is more for synchronizing than performing effects in our apps. therefore if you are having useEffects all over the place in your code then you are probably using it wrong. Here are some instances where you might be using the useEffect wrongly.

Setting derived state: One of the most common mistakes made with the useEffect hook is to use it for listening to changes on some props in order to update some other variables accordingly. this is an inefficient way of using the hook. a better alternative would be to eliminate the useEffect hook altogether and just set the variable directly as a standard pure variable in the component's scope. the variable will always be recalculated whenever any of its constituent state variables changes. for example below is a bad followed by a good practice when setting derived states.

// bad practice
export default function app(){

  const [ state , setState ] = useState()
  const [ derived , setDerived ] = useState()

  useEffect(()=>{
    setDerived(state + 1)
  },[state])

  // app statements continue...
}

// better
export default function app(){

  const [ state , setState ] = useState()
  const derived = state + 1

  // app statements continue...
}

Setting any state: it might be tempting at times to do some activities in the useEffect that mutates the state of the app. this is actually a very dangerous practice and can easily lead to an infinite loop of rerenders. this also is one of the reasons why it is advised to use a framework for data fetching. fetching data yourself with useEffect will get data that will at some point be stored in state and if not well managed can easily cause rerenders in a loop.

Sunning event handles: even though it is called the useEffect hook, it is not really suitable for effects caused by events, the best way to handle your events is in the event handlers close to the state changes, rather than listening to changes in useEffect to run effects.

component initialized Variables: You should be careful about using objects declared in the same component as the useEffect, these Objects should not be put in the dependencies array as this will cause the useEffect to run every time the component is rendered due to the fact that for each render, a new and different instance of the object is created.

Conclusion

In conclusion to this article, the useEffect hook is a very useful tool that just needs to be understood and used for its purpose. when used correctly, it offers so much value.

so guys those are some insights on the useEffect hook, to continue learning I would advise you to go to the new react docs React Docs Beta, and till next time, happy coding.

Some context

Recently I started working on a web project and decided to use Redux for state management, as it is going to be a rather big project and I wanted to learn Redux along the way.

So I went to the Redux website to get started and oh boy was I blown with a tsunami of overwhelming information. In the beginning, I just knew I wanted to use redux for my state management and thought "yea easy... let me just hop on there and start learning redux" little did I know I'd first need to know what I needed to learn in the redux ecosystem before even starting to learn any of the multiple products (3 to be exact) involved in this ecosystem.

well luckily for you, I've gone through the hassle of understanding these different packages so you won't have to start from scratch or be overwhelmed as I was.

now going straight to the subject of the matter,

Redux

Redux is a state management framework for javascript applications that manages and stores the application's in a predictable way. Now Redux is the base of everything. I would advise getting at least the bases and understanding its concepts and terminologies. for that here Is a youtube playlist that tremendously helped me codevolution. While it might have been published in 2019, I personally went through it, and I love the way the course is Structured and aimed at getting you to understand intuitively the redux pattern.

Redux Toolkit

Redux Toolkit is a wrapper over Redux, it is the recommended way of writing redux code since it has a lot of advantages over writing code in plane Redux (I guess..??). Redux Toolkit is just built upon Redux. It reduces the amount of boilerplate code you need to write to get started with a Redux project and so it makes it easier to use Redux. So since it is just a wrapper, it is not obligatory to use, you might still do well without it entirely, but if you want to make your life easier I'd recommend learning it too. Here is a youtube playlist that helped me with understanding Redux Toolkit codevolution.

React-Redux is a package written by the Redux team to facilitate the integration of Redux with React js components. it makes it so easy to retrieve and set state from the redux store and automatically update the UI as you would expect. This package is for my React.js guys, but as you might already know, Redux as a framework is not tightly coupled to react. the React-Redux package is just a third-party package written by the Redux team to ease integration with React js. both of the youtube playlists recommended above get into React-Redux at the end. Note, you can use a combination of React-Redux and Redux, or React-Redux and Redux-toolkit for your react projects

Bonus (Next-React-Wrapper)

Okay, you might be going " hey Mawit, you said there are 3 packages in the redux ecosystem, where does 'Next-React-Wrapper' come from?? huh?? "

well fellow, let me explain. Actually, using Redux in Next js seems to be a little more complicated, I mean, when you intend to use the State's values on the server side functions like getServerSideProps or GetStaticProps. so someone decided to start an open-source project that would help with just that. this package is not maintained by the redux team themselves ( I might be wrong) and that's why it doesn't appear on Redux's website. Now, personally, I haven't really used it yet, though it seems to be important too, I just want to bring it to your attention, so it's up to you what you want to do with the awareness. You should also understand that Next-React-wrapper is not mandatory for every Next.js app. as long as all your state management is run on the client side I think you are still fine without it.

So there you go guys, I hope this was helpful to you, I hope this was worth your time, and till next time, Happy coding.

Yes! I can imagine how frustrating it can be huh?

You just started your new react app, or you have been working on a project for a while, and have noticed the unpleasant double rendering of your react components which affects especially the useEffect hook(where most devs write their effects right?), firing functions, API calls, and other tasks twice each time the app loads.

Now you have searched through your code for possible causes but can't find it? well, I think I have an explanation for that. so without any further ado let's get started.

React Strict Mode

That's him😀! the hidden trouble maker. The latest version of React.js is v18.2.0, and these latest versions(from v18.0.0 to the most recent) come with some updates that seem controversial to many developers while more appropriate to others

One of these updates is the StrictMode, which from the docs :

is a tool for highlighting potential problems in an application.

This just means that it's a tool that helps in writing better code for better applications.

The mechanism by which your components are rendered twice is as thus:

• On render, the component will make the first mount.

• Then react will unmount to make checks on how your code handles unmounts which is very useful for cases where you have subscriptions to APIs that need to be cleaned up to avoid memory leakage and other performance issues.

• And finally, the component is mounted a second time.

Should you try walkarounds?

Well, it's really an 'it depends' kind of a thing. I personally think the react strict mode makes for better code writing and improved software development practices, even as I won't deny the fact that I felt like it impacted my development experience in the beginning. You might want to disable the strict mode if you are working on a more trivial project or some project where you value the development experience more and just want to get something done.

How to disable strict mode

if you decide to disable the strict mode in your project, it's quite easy. If you bootstrapped your project with the create-react-app command then in the index.js file you will most likely find a React.StrictMode component wrapping your App component. You can just delete the component's open and close tags and voila.

On State

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // react strict mode is on by default, so we need to turn it off
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Off State

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // now react strict mode is off
    <App />
);

Better Alternative

Now that you know how to stop the until now unexpected rerendering of your components in react, let me talk you into why you would be better off leaving it on.

Actually, as devs and builders of the future, it is our responsibility to write sustainable, efficient, and maintainable code in order to develop more robust software. That should be our priority and that is where react's StrictMode comes in place, to help us write better and more performant code.

conclusion

now I hope you know why you had those double logs in your console. Or those double API calls that you didn't expect, but now there remains a question:

"how do I stop my expensive functions from running twice without disabling strict mode?"

I think I will make that the topic for my next article so please leave a comment if you are interested or awaiting. and now, let me wish you a great day, and to the next article, happy coding!