Building Size-Aware React Components – LogRocket

Building Size-Aware #ReactJS Components:  by @b_edelstein #JavaScript

  • When using an HTML5 Canvas that has to be re-drawn whenever its size changesWhen building a layout where the user can adjust the sizes of different panesWhen using elements or 3rd party libraries that require a known size like react-virtualized, fixed-data-table, etc.When rendering elements with absolute positioning that need their position adjusted when the container size changes.When animating an element’s size with CSS with additional logic that depends on this animated sizeSome of these behaviors may be achievable with CSS, or by managing window size with the onResize event, but in the interest of building React components that are maximally reusable, it makes sense to encapsulate this logic into the component itself.
  • This method is called whenever the component’s size or position changes, and can be used to trigger side effects or put the dimensions into state.This solves most of the earlier examples but there’s one issue — a chicken and egg problem.
  • As such, we don’t always know the dimensions in the render function, so it’s not entirely possible for the component to have render logic based on its dimensions.react-sizemeTo solve this problem, we turn to a library called react-sizeme.
  • This library is similar to react-measure but uses a clever solution to solve the aforementioned problem.react-sizeme does an initial, invisible render of the component to measure its size.
  • Usually this feels quite fast, but in practice, I’ve noticed a slight delay in detecting changes which can lead to a component feeling slow.In general, react-measure has less of a performance impact, so it should be used if possible, but in cases where a component’s initial render depends on its size, then react-sizeme is a good option.Resources

When building React apps, it is sometimes advantageous for components to have awareness of their size and position on screen. This is useful both for rendering content initially, but also for…
Continue reading “Building Size-Aware React Components – LogRocket”

Accessing Frontend Data with React and Redux

Accessing frontend data with #ReactJS and #Redux:

  • Redux.js only has one store with a single state object that holds all the front end data needed for your app.
  • The data I needed for this view was the array of dog walkers.
  • In order to display that data, I used a component state property called animals, which would represent the animal objects in an array.
  • The state object stored in the store is like any other JavaScript object.
  • Essentially any component that is connected to the state object can access any key-value pair it needs, making working with the single Redux store very convenient.

Over the last few weeks, I have begun to compare the flux flow of React.js and Redux.js’s flow while working on projects. The two are both very powerful and work very well with front end views that users interact with. I learned React first, working in the flux flow, and recently have been developing with React-Redux.…
Continue reading “Accessing Frontend Data with React and Redux”