DEV Community

0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:00
 
Nick Taylor Subscriber for The DEV Team

Posted on • Edited on • Originally published at iamdeveloper.com

20 4

Converting a Preact Component to use hooks with Sophia Li

A few weeks ago, I wrote a post asking DEV community members if they wanted to potentially pair program with me during a live coding session.

A lot of interest was generated and so we did our first live coding pairing session that was streamed on doingdevfordev.com. It was with DEV community member Sophia Li.

She worked on the <ImageUploader /> Preact component in the DEV/forem codebase. It was originally a class component that she converted to a function component using the useState hook.

For the full recording of the pairing session check out the YouTube video below. Also, feel free to subscribe to my channel. 😉

Near the end of the pairing session we discussed the possibility of using the useReducer hook instead. After the pairing session, Sophia continued working on the PR she created and implemented the necessary changes to use the useReducer hook.

For those interested, here is the merged PR.

Update `<ImageUploader />` class component to use hooks #9369

What type of PR is this? (check all applicable)

  • [x] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

This PR refactors the <ImageUploader /> class component to a function component using the useReducer hook.

Related Tickets & Documents

#9338

QA Instructions, Screenshots, Recordings

Screen Shot 2020-07-25 at 4 10 02 PM

No new features were added, so we did not add new tests. All previous tests pass. The component works the same as before.

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

No

[optional] What gif best describes this PR or how it makes you feel?

excited woman dancing and celebrating

It was awesome pairing with Sophia and by the way, she’s looking for her next role!

Looking forward to the next pairing session!

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (2)

Collapse
 
ridhwana profile image
Ridhwana Khan

I read through the code earlier today, nice work @sophia_wyl and @nickytonline ! Using the useReducer hook was a really great addition 😍

Collapse
 
waylonwalker profile image
Waylon Walker • Edited

I like the short pre-roll video cover image, I am thinking about doing these for some of my posts.

DEV is built on open source software called Forem!

GitHub logo forem / forem

For empowering community 🌱


Forem 🌱

For Empowering Community

Build Status Build Status GitHub commit activity GitHub issues ready for dev GitPod badge

Welcome to the Forem codebase, the platform that powersdev.to. We are so excited to have you. With your help, we canbuild out Forem’s usability, scalability, and stability to better serve ourcommunities.

What is Forem?

Forem is open source software for building communities. Communities for yourpeers, customers, fanbases, families, friends, and any other time and spacewhere people need to come together to be part of a collectiveSee our announcement postfor a high-level overview of what Forem is.

dev.to (or just DEV) is hosted by Forem. It is a community ofsoftware developers who write articles, take part in discussions, and buildtheir professional profiles. We value supportive and constructive dialogue inthe pursuit of great code and career growth for all members. The ecosystem spansfrom beginner to advanced developers, and all are welcome to find their place…

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay