{"tag":{"id":"56744723958ef13879b95434","name":"React","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","slug":"reactjs","tagline":"React is a JavaScript library for building user interfaces.","__typename":"Tag"},"publication":{"__typename":"Publication","id":"60a60ab64e7f9549fc3301bf","url":"https://fildon.hashnode.dev","canonicalURL":"https://fildon.hashnode.dev","urlPattern":"SIMPLE","title":"","displayTitle":"","hasBadges":true,"descriptionSEO":"Principal Software Engineer at Odido. I love web development and love to teach others. Check out more of my stuff over here:\nhttps://rupertmckay.com/\n","publicMembers":{"totalDocuments":1,"__typename":"PublicationMemberConnection"},"about":{"html":"

Principal Software Engineer at Odido. I love web development and love to teach others. Check out more of my stuff over here:

https://rupertmckay.com/

\n","text":"Principal Software Engineer at Odido. I love web development and love to teach others. Check out more of my stuff over here:\nhttps://rupertmckay.com/\n","__typename":"Content"},"features":{"proTeam":{"isEnabled":false,"__typename":"ProTeamFeature"},"newsletter":{"isEnabled":true,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":true,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":true,"__typename":"ReadTimeFeature"},"textSelectionSharer":{"isEnabled":true,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":false,"published":null,"draft":null,"__typename":"CustomCSSFeature"},"gptBotCrawling":{"__typename":"GPTBotCrawlingFeature","isEnabled":false},"__typename":"PublicationFeatures"},"metaTags":null,"ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1631048012455/gC0s7VlVw.png","__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"60a603a5b4e16849d76dbadd","name":"Rupert McKay","username":"fildon","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621492646418/7WyKENmwZ.jpeg"},"preferences":{"__typename":"Preferences","logo":"","darkMode":{"__typename":"DarkModePreferences","logo":"","enabled":true},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"62188e222c936b90065e10e3","label":"Sponsor","url":"https://blog.fildon.me/sponsor","type":"link","series":null,"page":null}],"enabledPages":{"__typename":"PagesPreferences","badges":false,"newsletter":true,"members":true},"layout":"stacked","disableFooterBranding":false,"isSubscriptionModalDisabled":false},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1631045976715/iBuh6sde3.jpeg","headerColor":"","integrations":{"fbPixelID":null,"fathomSiteID":null,"fathomCustomDomainEnabled":null,"fathomCustomDomain":null,"hotjarSiteID":null,"matomoSiteID":null,"matomoURL":null,"gaTrackingID":null,"gTagManagerID":null,"plausibleAnalyticsEnabled":null,"wmPaymentPointer":null,"koalaPublicKey":null,"msClarityID":null,"__typename":"PublicationIntegrations"},"imprintV2":null,"postsCount":{"totalDocuments":14,"__typename":"PublicationPostConnection"},"isTeam":true,"links":{"twitter":"","instagram":"","github":"https://github.com/fildon","website":"https://fildon.me","hashnode":"https://hashnode.com/@fildon","youtube":"","dailydev":"","linkedin":"https://www.linkedin.com/in/rupert-mckay/","mastodon":"","facebook":null,"bluesky":null,"__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"fildon","domain":{"__typename":"DomainStatus","host":"blog.rupertmckay.com","ready":false},"wwwPrefixedDomain":null},"redirectionRules":[],"totalRecommendedPublications":0,"sponsorship":{"content":{"html":"

Hi I'm Rupert,

I don't need sponsoring. Instead of spending money on me, why not spend it on a tech union membership? Most historical positive social changes were brought about by workers unions.

Take care,

Rupert

\n","markdown":"Hi I'm Rupert,\n\nI don't need sponsoring. Instead of spending money on me, why not spend it on a tech union membership? Most historical positive social changes were brought about by workers unions.\n\nTake care,\n\nRupert","__typename":"Content"},"stripe":{"connected":true,"accountId":"acct_1JXAeqRREaON2O4h","country":"NL","__typename":"StripeConfiguration"},"__typename":"PublicationSponsorship"},"allowContributorEdits":true,"posts":{"edges":[{"node":{"__typename":"Post","id":"61ab9cc9b6bca85a26d3d0c9","title":"React Testing Library Recipes","slug":"react-testing-library-recipes","publishedAt":"2021-12-04T16:52:25.360Z","cuid":"ckws20cu202hdt2s17bz729pm","url":"https://fildon.hashnode.dev/react-testing-library-recipes","subtitle":"Common testing patterns for creating confidence in your UI tests","brief":"As long as I've been working in frontend development, the tools available for testing UIs have felt clunky, hard to use, and not filled me with confidence that they reflect real end-user experiences.\nI was especially tired of libraries that directly ...","readTimeInMinutes":6,"views":4580,"author":{"__typename":"User","id":"60a603a5b4e16849d76dbadd","username":"fildon","name":"Rupert McKay","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621492646418/7WyKENmwZ.jpeg","followersCount":51},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1638635407447/9nD9fXdup.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjFhYjljYzliNmJjYTg1YTI2ZDNkMGM5XzIwMjEtMTItMDRUMTY6NTI6MjUuMzYwWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"60f30734bb67011cb8369b7f","title":"Publishing TypeScript React components to NPM","slug":"publishing-typescript-react-components-to-npm","publishedAt":"2021-07-17T16:37:08.840Z","cuid":"ckr7ztgbb0aano8s151fg7hlu","url":"https://fildon.hashnode.dev/publishing-typescript-react-components-to-npm","subtitle":"Publishing to NPM can be daunting at first. In this guide we'll make it quick and easy.","brief":"Photo by Jess Bailey on Unsplash\n\nPublishing a TypeScript React component library to NPM\nKey takeaways:\n\ncompile to a dist directory\ncopy package.json and README.md files to the dist directory\npublish the dist directory\n\nIf you get stuck or lost at a...","readTimeInMinutes":7,"views":6735,"author":{"__typename":"User","id":"60a603a5b4e16849d76dbadd","username":"fildon","name":"Rupert McKay","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621492646418/7WyKENmwZ.jpeg","followersCount":51},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1626539307233/q_aYWC4Cl.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjBmMzA3MzRiYjY3MDExY2I4MzY5YjdmXzIwMjEtMDctMTdUMTY6Mzc6MDguODQwWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"60e06c0903707d644a50080d","title":"Mocking in Jest with TypeScript and React","slug":"mocking-in-jest-with-typescript-and-react","publishedAt":"2021-07-03T13:54:17.950Z","cuid":"ckqntu3qn0hqrt6s1ezdh65ns","url":"https://fildon.hashnode.dev/mocking-in-jest-with-typescript-and-react","subtitle":"It is functions all the way down","brief":"Photo by Andre Mouton on Unsplash\n\nKey takeaways:\n\njest.mock covers many use cases\njest.MockedFunction is the best for type-safe mock functions\nDon't be afraid to mock React components they are just functions!\n\nGetting started wi...","readTimeInMinutes":11,"views":12048,"author":{"__typename":"User","id":"60a603a5b4e16849d76dbadd","username":"fildon","name":"Rupert McKay","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621492646418/7WyKENmwZ.jpeg","followersCount":51},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1625319587511/Iu63P0LP0.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjBlMDZjMDkwMzcwN2Q2NDRhNTAwODBkXzIwMjEtMDctMDNUMTM6NTQ6MTcuOTUwWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"60d8446ecb0aa8118c23c75b","title":"Seeing through JSX to understand React component Types","slug":"seeing-through-jsx-to-understand-react-component-types","publishedAt":"2021-06-27T09:27:10.058Z","cuid":"ckqezngi50jmdgss1gsmqdzy4","url":"https://fildon.hashnode.dev/seeing-through-jsx-to-understand-react-component-types","subtitle":"Why you shouldn't use React.FC","brief":"Here are the big takes right away:\n\nDon't use React.FC.\nExplicitly type your props including permitted children types.\nPrefer inferred return types, but JSX.Element if you have to.\n\nTo justify these claims, we will peek behind the JSX curtain to see ...","readTimeInMinutes":7,"views":3290,"author":{"__typename":"User","id":"60a603a5b4e16849d76dbadd","username":"fildon","name":"Rupert McKay","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621492646418/7WyKENmwZ.jpeg","followersCount":51},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1624785678008/LToJwg4YX.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjBkODQ0NmVjYjBhYTgxMThjMjNjNzViXzIwMjEtMDYtMjdUMDk6Mjc6MTAuMDU4Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"60cf1e51c6377540dd23952b","title":"Understanding React Dependency Arrays","slug":"understanding-react-dependency-arrays","publishedAt":"2021-06-20T10:54:09.413Z","cuid":"ckq52od3i0au5t9s120dk1fu9","url":"https://fildon.hashnode.dev/understanding-react-dependency-arrays","subtitle":"","brief":"Photo by Jeremy Zero on Unsplash\n\nSeveral of React's hooks take a 'dependency array' argument. In this post, I will talk about different ways to use dependency arrays and some common pitfalls.\nWhat is a Dependency Array?\nDependency arrays are how we ...","readTimeInMinutes":4,"views":639,"author":{"__typename":"User","id":"60a603a5b4e16849d76dbadd","username":"fildon","name":"Rupert McKay","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621492646418/7WyKENmwZ.jpeg","followersCount":51},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1624186163435/CtFcc5zp9.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjBjZjFlNTFjNjM3NzU0MGRkMjM5NTJiXzIwMjEtMDYtMjBUMTA6NTQ6MDkuNDEzWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"60c0c6667c121d4151b3a88e","title":"How to create custom hooks","slug":"how-to-create-custom-hooks","publishedAt":"2021-06-09T13:47:18.979Z","cuid":"ckppj0ofk0846whs1grh71bnu","url":"https://fildon.hashnode.dev/how-to-create-custom-hooks","subtitle":"DRY component logic and separation of rendering from state management","brief":"Photo by Anne Nygård on Unsplash\n\nReact hooks are a powerful tool for managing state in your React components. In this post I'll be demonstrating how we can compose existing React hooks to make custom hooks that encapsulate reusable functionality.\nRe...","readTimeInMinutes":6,"views":336,"author":{"__typename":"User","id":"60a603a5b4e16849d76dbadd","username":"fildon","name":"Rupert McKay","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1621492646418/7WyKENmwZ.jpeg","followersCount":51},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1623246282988/c3We0BZ0B.jpeg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjBjMGM2NjY3YzEyMWQ0MTUxYjNhODhlXzIwMjEtMDYtMDlUMTM6NDc6MTguOTc5Wg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjBjMGM2NjY3YzEyMWQ0MTUxYjNhODhlXzIwMjEtMDYtMDlUMTM6NDc6MTguOTc5Wg==","hasNextPage":false,"__typename":"PageInfo"},"__typename":"PublicationPostConnection"}}}