React
Snippets
Jun 8, 2021
🔎 Syntax Error: Expected Name, found <EOF>When working on a Gastby app, I came across this error when running . Only context I had was that error happened at which is where the call to method was included. I had a hint from the logs that it was a . So I traced back to which query was used…
  • Gatsby
  • GraphQL
  • JavaScript
  • React
Jun 7, 2021
🧲 Using Context with a HoCThe Provider Context API in React enables data sharing between components at different level in the component tree. Consider this example: We have an component that is responsible for rendering a and the content. component is responsible to…
  • Context Providers
  • Higher Order Components
  • JavaScript
  • React
Jun 1, 2021
🔥 Efficient workflow with ESLint and PrettierI have a few tools which I use consistently across JavaScript projects I work on. ESLint and Prettier are in the top 5. Whereas Prettier is used to autoformat my code to enforce an opinionated code format, ESLint makes sure to keep my code style in a…
  • Code formatting
  • ESLint
  • JavaScript
  • Prettier
  • React
May 31, 2021
📥 Sharing state in GatsbyIn the last post, I showed how we can create a global layout for an entire app and have it shared between the pages without re-renders. In this post, we’ll go one step further and create a shared state management provider, that wraps the whole Gatsby…
  • Gatsby
  • JavaScript
  • React
May 30, 2021
🌐 Holy Grail layouts in GatsbyWhen we look at most modern web apps, they follow a Holy Grail layout. At its core, the Holy Grail Layout is a page with a header, footer, and three columns. The center column contains the main content, and the left and right columns contain…
  • Gatsby
  • JavaScript
  • React
May 27, 2021
♼ Writing re-usable logic with React HooksReact developers who have used functional components are usually familiar with and . These called Hooks, They let you use state and other React features without writing a class. You can implement your own custom Hook that can be re-used in your…
  • JavaScript
  • React
  • React Hooks