I just wanted to say that I have been really enjoying these videos! Great refreshers. Could watch the series front to back multiple times over. Thank you and I hope you keep it up!
Was just gonna comment for the algorithm but while I'm at it - just wanted to say that though I'm watching these videos in order to learn ts, I'm actually learning a lot about react as well - thanks Jack!
When i first started working in typescript a few months back it might as well have been statically typed in wingdings. But now thanks to these tutorials it scans like 18pt Helvetica and by the time ive completed these tutorials im sure Typescript will feel as approachable as some windows 98 wiggly squiggly blue wordart
Gotta give you a thumbs up, because you shared you code so well. I struggled with the constrained that i'm only allowed to call the dispatch hook from within a react function. In video you do not show the complete mangaer, but with your repo i was able to find the missnig wrapper function. Thanks!
I would only add one thing. On those custom hooks i would throw an error if the hook is used outside the correct provider. Kent (Dodds) has a good article about it. Thanks for the video. I am going through the rest of the series i didn't had time to check before 😊
Since you asked 😄 So far I got 78.46% of 44702 in my typescript coverage report. Typing can be realy difficult and I have some things that I just can't figure out yet, components are fairly simple compared to logic. What you mean "Property 'email' does not exist on type 'KeycloakTokenParsed'" I know I do get it from the response so lets create an extendable interface and cast it. Knowing this got me a bunch of steps closer. I'll just keep chipping away jsx files to tsx till I got 99.9% 😎
Great stuff Jack, I'm not sure why you extracted todos (list), addTodo & removeTodo into their own hooks, they could have been returned from one hook, to reduce extra declarations. imo... yet again, Great work :)
Love this content. Question about the duplicated component. Would the right hand side component write data back to the left hand component if you added a todo from that duplicated component?
I watched this video hoping to solve an issue I am having with Authorization context. My app is wrapped in a provider with initial auth data and then i want my user profile form to write to that context when changes are made. So then components which also use profile data are all updated too. Perfect example is changing a user’s avatar. There is an initial avatar, but when they change it in their profile, the avatar displayed in the header changes to reflect the new image. Hoping you can help
Hey Jack, if you had two list components that keep their own state of image objects (an array per component) and you need to access the state that each of those components is managing, could you track the state for both in a single context or would you need two? I have a single save button on a form and two image list component instances that aren't sharing state, yet I need to access the state of them on a click handler to make some api requests accordingly. Is there a context solution to this?
I would consider a lightweight state manager (e.g. valtio or zustand) or build a custom hook and share it via useContext. So assuming you want to do the useContext route, start with building a custom hook. Then share the output of that custom hook through context and a provider component. The use useContext to grab the values and callbacks that you need for each component from the context.
@@jherr Jack, so are you saying a single hook and a single context and provider?. So both components would be wrapped by the same provider, and each component would reach out to get the data and handlers out of the same context (and update the same context)? Does this mean both arrays that are currently being handled separately in each component would now be one array?
@@mattmarkus4868 I'm having a hard time understanding exactly what you are trying to do from what you've said. But yeah, all of the state would be in one hook. And you could pass the image index to the component as a property and it would only "subscribe" to the image at that index. It would help if you joined the Discord server and posted a link to a codesandbox project in there and then we could all have a look at it.
@@jherr Ok, i posted a sandbox in the channel. I tried to remove as much as possible but I still kept the basic ui concept. At least you can see what type of ui behavior i'm going for. There must be a method to use to end up with a clean api for managing the detail state for any of the tabs. Much appreciated.
![[#2024MAMA] G-DRAGON - 무제(Untitled, 2014)+POWER+HOME SWEET HOME+뱅뱅뱅+FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/Ox29z5Nf1Uk/mqdefault.jpg)
I just wanted to say that I have been really enjoying these videos! Great refreshers. Could watch the series front to back multiple times over. Thank you and I hope you keep it up!
Thank you for all your hard work putting these together. One of the best instructors i have ever come across - and I have seen a LOT of them!
React V 18.2.0
interface TodoProviderProps extends PropsWithChildren {
initialTodos: Todo[],
}
export const TodoProvider: React.FunctionComponent = ({ initialTodos, children }) => (
{children}
)
Was just gonna comment for the algorithm but while I'm at it - just wanted to say that though I'm watching these videos in order to learn ts, I'm actually learning a lot about react as well - thanks Jack!
Yess It answers my question on an ongoing project ! Thank you
When i first started working in typescript a few months back it might as well have been statically typed in wingdings. But now thanks to these tutorials it scans like 18pt Helvetica and by the time ive completed these tutorials im sure Typescript will feel as approachable as some windows 98 wiggly squiggly blue wordart
Great content, TS in 2021 is a must have skill.
love this series 🔥
Perfect really really perfect
Great Series fella! Love your work
Gotta give you a thumbs up, because you shared you code so well. I struggled with the constrained that i'm only allowed to call the dispatch hook from within a react function. In video you do not show the complete mangaer, but with your repo i was able to find the missnig wrapper function. Thanks!
No words ... awesome content
I would only add one thing. On those custom hooks i would throw an error if the hook is used outside the correct provider. Kent (Dodds) has a good article about it. Thanks for the video. I am going through the rest of the series i didn't had time to check before 😊
Took me a while to figure this out, but this video really helps, thank you sooo much!
Hey Jack absolutely love the content!
Since you asked 😄
So far I got 78.46% of 44702 in my typescript coverage report.
Typing can be realy difficult and I have some things that I just can't figure out yet, components are fairly simple compared to logic.
What you mean "Property 'email' does not exist on type 'KeycloakTokenParsed'" I know I do get it from the response so lets create an extendable interface and cast it.
Knowing this got me a bunch of steps closer.
I'll just keep chipping away jsx files to tsx till I got 99.9% 😎
great video, thanks Jack!
Great stuff Jack, I'm not sure why you extracted todos (list), addTodo & removeTodo into their own hooks, they could have been returned from one hook, to reduce extra declarations. imo... yet again, Great work :)
Yep, you're probably right. :)
Thanks master!
Great content thanks a lot!
Thanks for the video :)
Loved it !!!
Thanks a lot!
Cool series :)
Amazing
Thanks for this awesome content
California could use an overhaul of state management. ☝️😀 Great video JH.
Excellent.
Hey thanks!
Love this content. Question about the duplicated component. Would the right hand side component write data back to the left hand component if you added a todo from that duplicated component?
I watched this video hoping to solve an issue I am having with Authorization context. My app is wrapped in a provider with initial auth data and then i want my user profile form to write to that context when changes are made. So then components which also use profile data are all updated too. Perfect example is changing a user’s avatar. There is an initial avatar, but when they change it in their profile, the avatar displayed in the header changes to reflect the new image. Hoping you can help
Is Redux a standard hook now? Via useReducer?
It's not redux, but it has a very similar API to the reducers portion of Redux.
Hey Jack, if you had two list components that keep their own state of image objects (an array per component) and you need to access the state that each of those components is managing, could you track the state for both in a single context or would you need two? I have a single save button on a form and two image list component instances that aren't sharing state, yet I need to access the state of them on a click handler to make some api requests accordingly. Is there a context solution to this?
I would consider a lightweight state manager (e.g. valtio or zustand) or build a custom hook and share it via useContext. So assuming you want to do the useContext route, start with building a custom hook. Then share the output of that custom hook through context and a provider component. The use useContext to grab the values and callbacks that you need for each component from the context.
@@jherr Jack, so are you saying a single hook and a single context and provider?. So both components would be wrapped by the same provider, and each component would reach out to get the data and handlers out of the same context (and update the same context)? Does this mean both arrays that are currently being handled separately in each component would now be one array?
@@mattmarkus4868 I'm having a hard time understanding exactly what you are trying to do from what you've said. But yeah, all of the state would be in one hook. And you could pass the image index to the component as a property and it would only "subscribe" to the image at that index. It would help if you joined the Discord server and posted a link to a codesandbox project in there and then we could all have a look at it.
@@jherr Ok, i posted a sandbox in the channel. I tried to remove as much as possible but I still kept the basic ui concept. At least you can see what type of ui behavior i'm going for. There must be a method to use to end up with a clean api for managing the detail state for any of the tabs. Much appreciated.
5:30 example of experience worth
Thanks!!!!!!
Thank you for all your hard work putting these together. One of the best instructors i have ever come across - and I have seen a LOT of them!