Code Buckets

Buckets of code

Better Async Calls in the useEffect Hook

The useEffect hook allows you to perform side effects on your React page. A common use case would be to perform an API call to populate the page when the page has mounted i.e. The Problem The callApi method is…

Invalid hook call error in Next.js

A quick one. I keep getting this intermittent error when developing React applications using Next.JS – particularly when changing branches but it happens at other times too. Unhandled Runtime ErrorError: Invalid hook call. Hooks can only be called inside of…

Fading text in and out with React

The Task I want to fade text in and out of a React app. I’m populating a series of quotes from an API and I want them to change gracefully. The Demo App The demo is a React application showing…

Helpful Starter Projects for React and Node

Here are some simple starter projects for Node and React I’m using. I’ve got a bit sick of using create-react-app and seeing a mountain of security vulnerabilities before I even start. The number of errors seems to range from 5…

Changing configuration when deploying to different environments: comparing Node and React

I’m getting into Node a bit more and I wanted to look at how you would swap config settings when deploying into different test and production environments. In this post I’m going to compare Node to React – not so…

Infinite Buddha Quotes

Just moving on from the Pali Canon API that I published recently – I’ve published a web app which consumes the API. It randomly displays a quote from the Buddha, fades it out and displays the next with a suitably…

Cellular Automata with React

Here is a fun thing – above is cellular automation coded (by me) in React. Specifically, it is Conway’s Game of Life Rules The rules are Any live cell with two or three live neighbours survives. Any dead cell with…

Bootstrap Modal Dialog in React without JQuery

The Task I want the modal dialog component working in a React project. My React project uses function components and hooks but it would be the same with class components. The Problem To show the modal I need to call…

From Classic ASP to React

I’ve been a software developer for over 16 years. It’s not that long but in terms of software development it’s pretty long time. Perhaps it’s like dog years – 1 development year equals 7 normal person years so actually I’ve…

Shorter syntax for Node.js module import

I’ve found myself writing a lot of import module statements during React development that I could have shortened. It’s a bit dispiriting when everything above the fold in your code is a boilerplate import. To give an example – this…