Skip to content

Create React context for handling local storage #17347

@TomasEng

Description

@TomasEng

This issue depends on #17346 to be resolved first.

Accessing local storage directly in React components is bad practice since it may easily lead to fragile code. Functions that access local storage are impure by definition, and when local storage is modified by tests, it may lead to flaky and false positive results when multiple tests run in parallel. The latter may be solved by mocking the browser storage library, but it's even better to use Context, the same way as we have done with REST queries and feature flags.

To accomplish this, we need the following things:

  • A Context that holds an object with:
    • Key-value pairs reflecting the browser's local storage
    • CRUD functions for these values
  • A provider component that populates the context with the values from the real local storage, and that makes sure that mutations apply both to the real storage and to the context values
  • Hooks that are used to read and mutate those values

It's probably best to create a separate library for this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area/content-libraryArea: Related to library for shared resourcesfrontendsquad/dataIssues that belongs to the named squad.

    Type

    Projects

    Status

    No status

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions