The downside of this strategy would be the further complexity along the way in order to keep everything under control, as we’ll have to orchestrate side effects carefully. This strategy is the best of both worlds, as we can not only choose to deal with occasionally urgent changes to the cached content, but we can also maintain it for longer periods of time depending on the scenario at hand, so it’s all up to us. That means that the caching process can be controlled smoothly to allow for cache updates whenever needed. It allows us to protect ourselves against failing requests by always storing a previous version of the content we’re trying to retrieve.Īlthough it doesn’t really help much in terms of performance, its real benefit comes in the form of being a good measure for ensuring we’re protecting ourselves from failing server requests that would make us run into unexpected situations otherwise.Ĭonst = useState ( ) useEffect ( ( ) =>, ) Īs outlined in the example above, there is a version label attached to each cached entry that will be used to track the current cache version to an externally computed value (This will act as our control switch). This one might be the simplest, but yet an effective caching strategy. We are making use of the useEffect hook, which you can read more about here. Notes: In this article, we’ll be working with the Browser’s Local Storage API, as it is the most reliable and suitable solution for working with cache. Those requirements regard the time span of the content we wish to store, the frequency with which the cached content changes, the reliability of the server requests, as well as the type of application we are working with, which might be focused on either online or offline interactions.Ī factor that you might have to take into consideration, though, is whether your current project or the project you are intending to start working on is using a state management library such as Redux/Vuex/MobX, as that will require a different approach than what we’ll be going through in this article. There are 3 main strategies when it comes to integrating a caching solution with your React application, which all depend on your own custom requirements.
Integrating a caching strategy is one of the best ways through which we can improve a website’s performance, reduce the number of resources used, and ultimately improve our users’ experience by faster loading times.
0 kommentar(er)
