Sunday, January 17

Tag: react hooks

Using requestAnimationFrame with React Hooks
CSS Tricks, Web Tricks

Using requestAnimationFrame with React Hooks

Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way.TLDR: Pass an empty array as a second parameter for useEffect to avoid it running more than once and pass a function to your state’s setter function to make sure you always have the correct state. Also, use useRef for storing things like the timestamp and the request’s ID. useRef is not only for DOM references There are three ways to store variables within functional components:We can define a simple const or let whose value will always be reinitialized with every component re-rendering. We can use useState whose value persists across re-renderi...
Web Tricks

5 Ways to Convert React Class Components to Functional Components w/ React Hooks

In the latest alpha release of React, a new concept was introduced, it is called Hooks. Hooks were introduced to React to solve many problems as explained in the introduction to Hooks session however, it primarily serves as an alternative for classes. With Hooks, we can create functional components that uses state and lifecycle methods.Related Reading:Getting Started with React Hooks Build a React To-Do App with React Hooks (No Class Components)Hooks are relatively new, as matter of fact, it is still a feature proposal. However, it is available for use at the moment if you'd like to play with it and have a closer look at what it offers. Hooks are currently available in React v16.7.0-alpha.It's important to not that there are no plans to ditch classes. React Hooks just ...