React Hooks - Check If A Component Is Mounted

11 Jul 2019

If you’ve ever worked with a multi-page React app, you will invariably run into the dreaded warning in your console:

Warning: Can't perform a React state update on an unmounted component.

The most common cause of this warning is when a user kicks off an asynchronous request, but leaves the page before it completes. I especially wanted to know how to do this with hooks, because hooks are awesome.

I wanted to know how to avoid this classic React warning - here’s my solution.

const SampleComponent = () => {

    const [counter, setCounter] = useState(0)

    // Here's how we'll keep track of our component's mounted state
    const componentIsMounted = useRef(true)
    useEffect(() => {
        return () => {
            componentIsMounted.current = false
        }
    }. []) // Using an empty dependency array ensures this only runs on unmount

    const incrementCounterAsync = useCallback(()=> {
        async () => {
            try {
                await someLongRunningProcess()
                if (componentIsMounted.current) {
                    setCounter(counter + 1)
                }
            } catch (err) {
                // Handle your error
            }
        }
    }, [setCounter])

    render ( 
        // Display the counter + a button to increment it 
    )
}

To explain the above code snippet, imagine we have a sample component that simply displays a counter, and a button to increment the counter.

When we click the button, it fires off someLongRunningProcess() - this could be a backend operation or whatever. Use your imagination.

When someLongRunningProcess() has completed, we make sure we’re still mounted via the componentIsMounted variable! If the component is still mounted, we can modify the state, no problem. If it’s not mounted - hey, that’s alright, we won’t touch the state.

This will dodge that nasty React warning! Have fun!


Introducing Age of Sigmar Reminders App

17 May 2019

I just developed a nifty online tool that might help you guys with Seraphon battles in the future. As a Seraphon player, I was always stressed that I was forgetting to do things in the right phase.

So, I developed AoS Reminders. It only has Seraphon for now . I will probably add Sylvaneth next.

Check it out here -> https://daviseford.com/aos-reminders/

Basically, you add your units, battalions, and artifacts, and you will get an ordered list of what abilities to use during which phase. It’s pretty specific - for example, if you add Ripperdactyls, it will remind you to place a Bloat Toad on Turn One - Hero Phase.

Please give it a whirl and let me know if you enjoy it! I would LOVE some feedback and critiques! I am looking to expand this to other armies eventually, but figured my own Seraphon (of which I have over 4k points worth :p) would be a good start.

Here’s a look at the UI:

AoS Reminders Beta UI

P.S. it is print-friendly! When you hit print, all of the fancy UI elements are stripped out and you get a list like so:

AoS Reminders Beta Print Format

This was developed using React/TypeScript, for those who might care about such things. :) Check out the code here: Github

Feel free to fork it and add your own army! I will gladly accept contributions.


Magnetized Seraphon Stegadon/Engine of the Gods Build

31 Jan 2019

Here are some pictures of my newly created (and thoroughly magnetized) Warhammer: Age of Sigmar Seraphon Stegadon/Engine of the Gods model.

Saurus Stegadon - Sixteen Magnets of Fun

This miniature boasts sixteen magnets.

  • Four 1x1mm neodymium magnets for the mountable flamethrowers
  • Twelve 2x1mm neodymium magnets:
    • Two on the base to hold the spare Alpha/Priest
    • Two per Alpha/Priest (feet)
    • Two in the skink’s contraption to hold the active Alpha/Priest
    • Two in the Stegadon’s back, to switch between:
      • Decorative headpiece (used with flamethrowers)
      • Crossbow

The model can be converted between three configurations using magnets:

  1. Stegadon - with Flamethrowers
  2. Stegadon - with Crossbow
  3. Engine of the Gods

By adding magnets all over the model, I was able to achieve a dual-function model, something I’m quite proud of.

Saurus Stegadon - Color Scheme by Amanda Killingsworth Saurus Stegadon Saurus Stegadon
Saurus Stegadon
Guinness for scale, of course.
Saurus Stegadon
Six skinks steer Stegadon, semi-successfully.
Saurus Stegadon Saurus Stegadon

End Result

This was my first time magnetizing a model. I learned a lot. I’m writing this blog mostly as a way to recap what I’ve learned.

Lessons Learned

  • Use eBay to buy magnets. Amazon is not great.
  • Use a hand drill, not a powered drill, for more precision.
  • Don’t be afraid to use green stuff liberally to fill in your mistakes
  • 1x1mm magnets are not strong enough to hold much weight
  • 2x1mm magnets, on the other hand, are perfectly strong enough for most applications
  • Stick your magnets together and mark the ends with a sharpie.
  • Never trust your previous markings - always test the magnet polarity before affixing them.
    • I learned this multiple times.
  • Magnetizing things is fun!

Here are some pictures from the build:

Priming the model.
Drilling a shallow hole for my 1x1mm magnets.
1x1mm magnets are used for the flamethrowers. In retrospect, I would have used a 2x1mm here.
I drill about 2mm deep into the plastic with my hand drill, and then add a dab of superglue. I then place a small ball of green stuff in the drilled hole, and place the magnet on top of it. This method lets you angle and adjust the magnet - keep it flush!
2x1mm magnets are used everywhere else on the model.
The crossbow magnets - now 2x1mm!
Crossbow test fit. The Stegadon back originally featured two 1x1mm magnets - but they couldn't hold the crossbow in place. I had to dig them back out and replace them with 2x1mm.
Early test fit - everyone aboard! I had to make sure my models didn't end up blocking each other with all of the various configurations.

I can’t wait to use this guy in an upcoming battle. Being able to alternate between model types will be awesome for future replayability.

While the model technically is lacking an Engine, I’ve made up for that with lore! You see, the Engine on this particular model broke down many years ago and was discarded. The mighty Skink Priest was so clever and determined to succeed that he managed to channel the spirit of the Engine through himself.

So, the Skink Priest == Engine, on this model. Don’t think too much about it.


Seraphon Sunblood, Kroxigor, and Oldblood on Carnosaur

20 Jan 2019

Some great photos of my Warhammer: Age of Sigmar Seraphon models. All of the photos were taken by Nicole Griffin. The desert scene was edited and put together by Fulton Griffin.

Saurus Sunblood - Color Scheme by Amanda Killingsworth Kroxigor Saurus Sunblood Saurus Sunblood Saurus Oldblood on Carnosaur Saurus Oldblood on Carnosaur Saurus Oldblood on Carnosaur Kroxigor
Saurus Oldblood on Carnosaur - Edited by Fulton Griffin Saurus Oldblood on Carnosaur Kroxigor Front Saurus Oldblood on Carnosaur Kroxigor - Color Scheme by Amanda Killingsworth Kroxigor Kroxigor Saurus Sunblood

I am extremely happy with how my Kroxigor’s back scales came out! The Sunblood’s mace and shield are given the glowing effect with a liberal application of polyurethane.