A guide to typing React hooks with TypeScript

#​261 — October 20, 2021

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday.

Six Concrete Tips That Will Make Your React Pull Requests Easier to Review — Looking to have your pull request rise above the background noise for an active repo? Making it easier to review could well be the difference in getting it moved up the priority scale. Good principles to consider even beyond React.

Chak Shun Yu

How to Replace useState with useRef and Be a Winner — A post walking through the differences between different forms of state, when state is really needed or not, and an alternative and optimizations for certain cases.

Vladimir Klepov

How To Format Dates in a React DatePicker — Let’s break down common date and time formats and learn some handy tips for using the KendoReact DatePicker and DateTimePicker to easily manage the tricky business around date and time input. Read on.

Progress KendoReact sponsor

React & TypeScript: A Guide to Typing Hooks — Focusing on a few common use cases like useState, useReducer, and useRef.

Pierre Ouannes

📅  React Advanced London (and Remote) — While in-person events are finally coming back—thankfully—React Advanced is still offering a hybrid program: one day live and one day of remote events. The program features the likes of Kent C. Dodds, Jenn Creighton, Maggie Appleton, Sunil Pai, Colby Fayock and many other React thought leaders.

React Advanced

Useful React APIs for Building Flexible Components with TypeScript — Learn about some lesser-covered features (including React.cloneElement, React.isValidElement and component extends type) that can help take your component development up a level.

Gaurav Khanna (Smashing Magazine)

Hide Popups When the User Scrolls Away — Popups can thoroughly spoil an otherwise good UX, so it’s best to make sure they’re hidden when no longer useful.

Bianca Dragomir

Integrating React Hook Form and Redux-Toolkit

Oren Farhi

Writing Truly Reusable React Hooks, One Test at a Time

Valentino Gagliardi

Are Many useStates Better than useState(object)?

Vladimir Klepov

Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

React Native Engineer at IGN (Remote) — IGN, leading publisher of video game & entertainment news, is seeking a full time engineer to join us and help build the next generation of mobile apps. Interested? We’d love to talk.

IGN

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

🛠 Code and Tools

react-signature-pad-wrapper: Smooth, Realistic Signatures — Signatures—or autographs, if you will—can look pretty awful without the assistance of something like Signature Pad (which makes the drawing of them more ‘smooth’). Here’s a React wrapper for it.

Michael Dzjaparidze

react-chartjs-2: Incorporate Chart.js Into Your Next React Project — The popular, richly-featured and mature Chart.js charting library made available for React. Live demos? Naturally.

reactchartjs

Build Internal Tools in Minutes with Retool, Where Visual Programming Meets the Power of Real Code

Retool sponsor

React-Menu 2.1.0: All The Menu Use Cases You’ll Ever Need? — This covers just about every menu use case, many of which are not available in more popular React libraries. This includes submenus, radio and checkbox functionality.

Zheng Song

Elecrue: Boilerplate Generator for Electron Apps — Generates code for either React or Vue with Tailwind CSS in both JavaScript & TypeScript.

Rajvir Singh

Talkr: Lightweight i18n Provider — Auto-detects browser language and plural rules, provides autocompletion and supports TypeScript, all with no dependencies.

DoneDeal0

pgAdmin 4 v6.0 Released, Now Uses React — The popular Web-based interface for the PostgreSQL database system gets a big upgrade and, notably, switches to using React to power its front end.

pgAdmin Team

⚡️ Quick Bits:

Fireworks.js — No, not a metaphor for something else; actual, animated fireworks. See them in action here.

react-native-jsi-contacts — A performant contact library for React Native (Android only).

React Native Test App — Test apps for all React Native platforms in one convenient package.

Feather Icons React — The minimalist, open source icon library as a React component.

react-native-star-rating-widget — Animated star ratings made easy.

Leave a Reply

Your email address will not be published. Required fields are marked *