The useEffect React hook lets you perform side effects in functional components, such as fetching data, subscribing to a service, or manually changing the DOM. It can be configured to run after every render or only when certain values change, by specifying dependencies in its second argument array. The useMemo React hook memoizes expensive calculations in your component, preventing them from being recomputed on every render unless specified dependencies change. This optimization technique can significantly improve performance in resource-intensive applications by caching computed values.
Let’s walk through what we have going on here. The App() function is returning JSX containing <p>The current time is {currentTime}</p> and currentTime is defined by setCurrentTime. The code block useEffect(() => {}); executes whenever the state changes and can be used to do something like fetching data or talking to an authentication service. It also fires when the page first renders. So, what does that empty dependency array (,[]) do in useEffect(() => {},[]);? It makes sure that useEffect only runs one time instead of running whenever the state changes.
In this example, it still runs useEffect(() => {},[]); only once (instead of whenever the state changes) but it uses setInterval() inside of useEffect to refresh the state once every 1000 milliseconds.
In this one, we have three form elements: a number picker for “digits of pi”, a color picker for changing the background, and a read-only textarea field that shows the value of π to the precision specified in the “digits of pi” input. With no dependency array on useEffect(() => {});, whenever either “Digits of Pi” or the color picker change, useEffect is triggered. If you open the console and make a change, you can see how it is triggered once when you change the background color and twice when you change the digits of pi. Why? It does that because when you change the number of digits, it also changes the value of pi and you get one execution per state change.
In this revision, instead of piValue having a state, it is “memoized” and the value of the variable only changes if the value of digits changes. In this version, we are also adding a dependency array to useEffect() so that it only executes if the value of color changes. Alternatively, you could also just have two . Let’s take a look at that.
If you throw open your console and change the two input values, you will see that it is no longer triggering useEffect() twice when changing the number of digits.
Have any questions, comments, etc? Feel free to drop a comment, below.
The actual blog post is on a WordPress blog and it is publishing to the Fediverse from there. There is some sort of magic that that (first-party) wordpress plugin is doing, but I couldn’t tell you what it is.
Over the years, we have looked at jQuery, AngularJS, Rivets, and Vue.js. I figured that it was time to add React to the list. Facebook developed React for building user interfaces. The big difference between Vue and React is that React uses one-way binding whereas Vue uses two-way binding. With React, data flows downward from parent components to child components and to communicate data back up to the parent component, you would need to use a state management library like Redux. React is also a library where Vue.js is a framework, so React is closer to Rivets. You can run React with or without JSX and write it with or without a framework like Next.js.
Let’s look at how binding works in React and how it compares to Vue. In Vue, if we wanted to bind a form input to a text value, it would look like this …
You will notice that the React version uses the useState React Hook. Where the Vue version uses const inputText = ref('Blah Blah Blah'); for reactive state management, React uses const [inputText, setInputText] = React.useState('Blah Blah Blah'); to manage state. Also, Vue has two-way binding with the v-model directive but with React, the text updates when the state changes, but the state doesn’t automatically update when the input is edited. To deal with this, you manually handle updates to the input’s value via an onChange event. The developer is responsible for triggering state changes using the state updater functions in React. Another big difference is that Vue uses a template syntax that is closer to HTML while with React, JSX is used to define the component’s markup directly within JavaScript.
This example is very similar to what we had before but now there are child elements for setInputText(event.target.value)} /> and <TextDisplay text={inputText} />. This approach promotes code reusability. By encapsulating the input field and display logic into separate components, these pieces can easily be reused throughout the application or even in different projects, reducing duplication and fostering consistency. It is kind of the React way. Each component is responsible for its own functionality — InputForm manages the user input while TextDisplay is solely concerned with presenting text. This separation of concerns makes the codebase easier to navigate, understand, and debug as the application grows in complexity.
Have a question, comment, etc? Feel free to drop a comment.
This past autumn, I started playing around with the Composition API, and at the October 2023 Hack and Tell, I put that knowledge into writing a “Job Tracker“. The job tracker used Vuex and Firebase Authentication to log a user in using their Google credentials. With const store = useStore() on your view, you can do something like Welcome, {{user.data.displayName}} but using this technique you can also use …
… to kick off the authentication of the user. I want to use it to finally finish the State Parks app but I also want to use Pinia instead of Vuex, I wanted the resulting app to be a PWA, and I wanted to allow the user to log in with more than just Google credentials. So, this past week, I wrote my “Offline Vue Boilerplate“. It is meant to be a starting point for the State Parks app and a few other apps that I have kicking around in my head. I figured that this week, we should go over what I wrote.
Overview
The whole point of this “boilerplate” application was for it to be a common starting point for other applications that use Firebase for authentication and a NoSQL database. It uses:
I was using a lot of this stack for work projects, also. It is nice because Firebase is cheap and robust and you don’t need to write any server-side code. Hosting of the front-end code is “cheap-as-chips”, also. The Job Tracker is hosted using Firebase Hosting (which is free on the spark plan) and The Boilerplate App is hosted using Render, which is just as free.
Authentication
I am most proud of how I handled authentication with this app. Here is what the Pinia store looks like:
From your view, you can access {{ user }} to get to the values that came out of the single sign-on (SSO) provider (the user’s name, email address, picture, etc). For this app, I used Google and Microsoft but Firebase Authentication offers a lot of options beyond those two.
Adding Google is pretty easy (after all, Firebase is owned by Google) but adding Microsoft was more difficult. To get keys from Microsoft, you need to register your application with the Microsoft identity platform. Unfortunately, the account that you use for that must be an Azure account with at least a Cloud Application Administrator privileges and it can not be a personal account. The account must be associated with an Entra tenant. This means that you need to spin up an Entra tenant to register the application and get the keys.
The third SSO provider that I was tempted to add was Apple but to do that, you need to enroll in the Apple Developer program, which is not cheap.
Firebase Cloud Firestore
I have become a big fan of Firebase Cloud Firestore over the years (at least for situations where a NoSQL database makes sense). The paradigm that I started playing around with last year involved putting the Firebase CRUD functions in the composable.
Here is an example <script> block from the Job Tracker:
The author of the view doesn’t even need to know that Firebase Cloud Firestore is part of the stack. You might wonder how security is handled.
Here is what the security rule looks like behind the job tracker:
The rule is structured so that any authenticated user can create a new record but users can only read, delete, or update if they created the record.
How I made it into a Progressive Web App (PWA)
This is the easiest bit of the whole process. You just need to add vite-plugin-pwa to the dev dependencies and let it build your manifest. You do need to supply icons for it to use but that’s easy enough.
The Next Steps
I am going to be using this as a stepping-stone to build 2-3 apps but you can look forward to a few deep-dive posts on the stack, also.
Have any questions, comments, etc? Please feel free to drop a comment, below.
🦎 MERCÈ, the mascot of #DrupalConBarcelona has arrived in DAVOS! Don't miss the chance to capture a moment with Mercé and win a free ticket! DrupalCon Europe
Qui aurait besoin de développements web (site vitrine ou ecommerce, tableau de bord, outil métier, manipulation de données, etc ?) sans contraintes techniques ?
🚀 Ready to unlock the power of grit and make the impossible happen? Join our keynote speaker, Tearyne Almendariz at #DrupalMountainCamp 2024, where she'll show us how we can master our inner strength and achieve goals with perseverance while preserving our peace of mind.
If there was an #HTML element that changes it's content when users interact with other elements on the page, what name would it have?
PLEASE NOTE: I am not suggesting that this element needs to exist; I am only asking what it would be called. I'm building a CustomElement, I just want it to have a name that makes sense.
Vote and suggest others in replies. Please boost for reach!
Round 2; because I've gotten some good suggestions
This <HTML> element updates itself with the result of an HTTP request that some other element on the page made. It can replace, append or prepend it's contents.