<p><strong>Hey, I’m Josh&nbsp;Pohl.</strong></p>
<p>I’m a full-stack software engineer living in San Antonio. Currently a senior software engineer at Cameo.</p>
<p>Find out more about me <a href="/about">here</a>.</p>


__Hey, I’m Josh&nbsp;Pohl.__

I’m a full-stack software engineer living in San Antonio. Currently a senior software engineer at Cameo.

Find out more about me [here](/about).

Back Porch During Texas Snowstorm

Home

Sunset Over Wrigley Field

Yankee Clipper Inn Trail

Mission San Juan — Mossy Roof

Narada Falls — Overlook

Lahaina Basketball Hoop

Lahaina — Basketball Hoop

Stone Wall San Antonio Botanical Garden

San Antonio Botanical Garden — Stone Wall

> Dev notes are shorter posts in a draft-like quality and typically include a code example.

If an `<img>` source needs to be changed based on media breakpoints, we can use a [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element to do just that and also support higher pixel density screens.

For this example, let's say we're building a photo grid component that needs to work at three breakpoints: mobile, tablet, and desktop.

<img loading="lazy" src="https://images.ctfassets.net/756xghnuzngg/50VXoaNznSZ6sissgybvNI/3f183562c2ba72370cca0eef694d5caa/dn-01-2021-06-04-1313.png" alt="3 images per row on desktop, 2 images per row on tablet, 1 image per row on mobile" />

We need a higher resolution image for mobile and tablet views than we do for desktop. We'll define two `<source>` elements inside of each `<picture>` with `media` properties — one for tablet and one for desktop. The default `<img>` inside of the `<picture>` will take care of our mobile size.

```html
<picture>
	<source
	  media="(min-width: 801px)"
	  srcset="image-200.jpeg, image-300.jpeg 1.5x, image-400.jpeg 2.0x"
	>
	<source
	  media="(min-width: 501px)"
	  srcset="image-300.jpeg, image-450.jpeg 1.5x, image-600.jpeg 2.0x"
	>
	<img
	  loading="lazy"
	  src="image-500.jpeg"
	  srcset="image-500.jpeg, image-750.jpeg 1.5x, image-1000.jpeg 2.0x"
	/>
</picture>
```

Dev Notes #1 — Picture Element Basics

> Hey there! If you're just looking for the full code example, jump down to [Putting It All Together](#post-putting-it-all-together).

Out of all the different React form libraries I've used in different projects, [Formik](https://formik.org/) is currently my favorite. It's intuitive and provides lower-level API access to workaround situations a high-level only API might not anticipate.

If you're building a large form, or one that will be filled out slowly over some time, persisting its state across sessions is really important. It's especially important if you anticipate much usage on mobile where apps are often removed from memory unexpectedly when users are multitasking.

Fortunately, Formik makes adding that behavior simple, and that behavior can also be consolidated into one reusable component that you can drop into any Formik form provider.

# Saving to Local Storage

Let's start by saving the form state into local storage when the form is updated. We're going to use two libraries here ([`react-fast-compare`](https://www.npmjs.com/package/react-fast-compare) and [`use-debounce`](https://www.npmjs.com/package/use-debounce)) to simplify the example code, but feel free to roll your own code or use an equivalent library as a replacement.

```jsx
import {useEffect, useRef} from 'react';
import {useFormikContext} from 'formik';
import isEqual from 'react-fast-compare';
import {useDebouncedCallback} from 'use-debounce';

const FormikPersist = ({name}) => {
  const {values} = useFormikContext();
  const prefValuesRef = useRef();

  const onSave = (values) => {
    window.localStorage.setItem(name, JSON.stringify(values));
  };

  const debouncedOnSave = useDebouncedCallback(onSave, 300);

  useEffect(() => {
    if (!isEqual(prefValuesRef.current, values)) {
      debouncedOnSave.callback(values);
    }
  });

  useEffect(() => {
    prefValuesRef.current = values;
  });

  return null;
};

export default FormikPersist;
```

Our `FormikPersist` component takes one prop: a `name` to be the unique identifier we will use to store the form in `window.localStorage`. Since our component will live underneath a Formik provider, we can use `useFormikContext` to access the current values of the form. On each render of our component, we compare the previous list of values with the current values and save the latest values to local storage if they differ. We use a debounced version of our `onSave` function to write to local storage so as to not write too many times in quick succession.

The hardest part is over—the rest is even easier.

# Rehydrating on Refresh

Now we just need to check our local storage on component mount and initialize the form values if we find them.

```jsx
...

  // We're now grabbing 'setValues' as well
  const {values, setValues} = useFormikContext();

  ...

  useEffect(() => {
    const savedForm = window.localStorage.getItem(name);

    if (savedForm) {
      const parsedForm = JSON.parse(savedForm);

	  prefValuesRef.current = parsedForm;
	  setValues(parsedForm);
    }
  }, [name, setValues]);

...
```

> Tip: one alteration you might want to make to this component is to only rehydrate form values that were saved within a certain time span (e.g. the last day or the last week). To do that we would save a timestamp with the form values and compare that timestamp with the current time in this `useEffect`.

# Putting It All Together

We now have our complete `FormikPersist` component that we can place under a Formik provider to handle persisting our form state on refresh.

```jsx
import {useEffect, useRef} from 'react';
import {useFormikContext} from 'formik';
import isEqual from 'react-fast-compare';
import {useDebouncedCallback} from 'use-debounce';

const FormikPersist = ({name}) => {
  const {values, setValues} = useFormikContext();
  const prefValuesRef = useRef();

  const onSave = (values) => {
    window.localStorage.setItem(name, JSON.stringify(values));
  };

  const debouncedOnSave = useDebouncedCallback(onSave, 300);

  useEffect(() => {
    const savedForm = window.localStorage.getItem(name);

    if (savedForm) {
      const parsedForm = JSON.parse(savedForm);

      prefValuesRef.current = parsedForm;
      setValues(parsedForm);
    }
  }, [name, setValues]);

  useEffect(() => {
    if (!isEqual(prefValuesRef.current, values)) {
      debouncedOnSave.callback(values);
    }
  });

  useEffect(() => {
    prefValuesRef.current = values;
  });

  return null;
};

export default FormikPersist;
```

```jsx
// inside some render function
<Formik {...props}>
  <Form {...props}>
    <FormikPersist name="our-form" />
  </Form>
</Formik>
```

And that's it! Add this to your form and you'll make mobile visitors of your website much happier if their browser tab is thrown to the wind. I'm looking at you, [iOS 13](https://www.theverge.com/2019/10/31/20942043/apple-ios-13-iphone-11-pro-ram-memory-management-app-background-refresh)

Persist Formik State on Refresh with React Hooks

I've lived in San Antonio, Texas for almost 20 years but I've never made the approximately 90 minute drive out to [Enchanted Rock State Natural Area](https://tpwd.texas.gov/state-parks/enchanted-rock). Once it came into view on the drive up there, I laughed because it's literally a giant rock. I don't know what I was expecting.

The weather was terrific and surrounding area is really beautiful. Near the end of the hike we heard the grass rustling of a rattlesnake we didn't notice right beside the trail. We were spooked and ran away quickly. The big fella was probably just trying to get warm.

<div class="photo-grid">
  <a href="https://images.ctfassets.net/756xghnuzngg/6uE9CD02Jl9bH9YP0yaoZp/0b1a30d9dcff47cd5c68f94c54768e02/round-side.jpg" data-size="2048x1536">
      <img loading="lazy" src="https://images.ctfassets.net/756xghnuzngg/6uE9CD02Jl9bH9YP0yaoZp/0b1a30d9dcff47cd5c68f94c54768e02/round-side.jpg?w=500" alt="Side of Enchanted Rock."/>
  </a>
  <a href="https://images.ctfassets.net/756xghnuzngg/46dFLbRPDfHM3akiwoCEB6/5fd5e2d66b68886292663df45d9ec3c7/second-rock.jpg" data-size="1536x2048">
      <img loading="lazy" src="https://images.ctfassets.net/756xghnuzngg/46dFLbRPDfHM3akiwoCEB6/5fd5e2d66b68886292663df45d9ec3c7/second-rock.jpg?w=500" alt="A second round round next to Enchanted Rock." />
  </a>
  <a href="https://images.ctfassets.net/756xghnuzngg/5WwtNZUAruUeIG3Ki99kcj/9f83266a0bcaaae6f3c1404b7e4d2cef/side-of-rock.jpg" data-size="1536x2048">
      <img loading="lazy" src="https://images.ctfassets.net/756xghnuzngg/5WwtNZUAruUeIG3Ki99kcj/9f83266a0bcaaae6f3c1404b7e4d2cef/side-of-rock.jpg?w=500" alt="A set of rocks on the side of Enchanted Rock."/>
  </a>
  <a href="https://images.ctfassets.net/756xghnuzngg/3uXHntDJW0qegUcIyCtNY5/4782e3567554d93813d46c96bd870971/path-to-lake.jpg" data-size="1536x2048">
      <img loading="lazy" src="https://images.ctfassets.net/756xghnuzngg/3uXHntDJW0qegUcIyCtNY5/4782e3567554d93813d46c96bd870971/path-to-lake.jpg?w=500" alt="A trail on the backside of Enchanted Rock."/>
  </a>
  <a href="https://images.ctfassets.net/756xghnuzngg/SmvbWWvLfaL1bs9BBoGxH/1b723c8a72b620f1abd01981e498d302/lake.jpg" data-size="2048x1536">
    <img loading="lazy" src="https://images.ctfassets.net/756xghnuzngg/SmvbWWvLfaL1bs9BBoGxH/1b723c8a72b620f1abd01981e498d302/lake.jpg?w=500" alt="A small lake behind Enchanted Rock."/>
  </a>
</div>

Recent Posts

Dev Notes #1 — Picture Element Basics

Persist Formik State on Refresh with React Hooks

Now: Hike at Enchanted Rock

Recent Photos