Prop Drilling? React.useContext FTW!

05 Jun 2020 Every now and again you find yourself in a situation using dumb components - aka u pass them their source of truth through props - and you realize there is this deeply nested child component. So how to get the “goods” to the child? Well you could start passing props from the parent all the way down, but frankly its sucks, and its fugly. There must be a better way. To begin with we could just store our goods on the global redux state and simply access it through there using the useSelector hook, however it’s also not very elegant...

Styled Components

30 May 2019 Using React? Using Styled Components? “Yes” - ok you can skip this article. Im gonna assume you already know what styled components are if you have gotten this far. Maybe you’re on the fence of whether to use or just use CSS, PostCSS, SCSS or whatever else makes sense for you. Having used all the above, I can say that using the styled component paradigm in building react web apps is the best approach. Ease in including Wanna start to use styled components, easy jump right in! yarn or npm install them and away you go. No need to hook...

this.props.children for Loading

27 May 2019 This is a pretty simple approach and a very common pattern in React, but when using it to halt the loading of an app it becomes a powerful tool. Working with some pretty great devs in the last years has introduced me to some great React patterns, this has become a standard go to for all of my apps that require some async activity before the app is loaded. This pattern is made up of two components <AppStartup/> and <AppReadyWaiter/>. class AppStartup extends React.PureComponent { componentDidMount() { this.props.initApp(); } render() { return null; } } const mapDispatchToProps = dispatch =>...

Spread Operator

25 May 2019 ... There is it, the three dots known as the spread operator. Object.assign just got thrown to the side of the road like a verbose hitchhiker taking up way too many keystrokes. Whats it good for you ask!? What isn’t it good for!? Spread introduction to JS is the knife thats spreading butter on our functional fun toast. OK, OK… enough with the analogies. When first coming across spread in code it can be quite tricky to understand without having used it before, however after some simple use you wonder how you dealt with functional JS before. const x =...

Array.flat vs Array.reduce

20 May 2019 Lets check out my new favorite method for flattening array in array strucutres we commonly run across in functional programming. What method is that you ask!? Well, Array.flat() I say! Its the fastfood version of flattening arrays, vs the restaurant version of reduce, so lets examine. const nestedArray = [['someJuicyData'], ['anotherPieceofJuicyData']]; //Desired Outcome => ['someJuicyData', 'anotherPieceofJuicyData']; const flattenedArrayWithReduce = nestedArray.reduce((memo, nest) => memo.concat(nest), []); const flattenedArrayWithFlat = nestedArray.flat(); So as you can see in the code we handle the flattening with reduce by starting with an empty array and concating the inner array in the outter array we are working...